0

我的 onPress 和道具有问题。

我有一个在 homeScreen 组件中调用的任务组件，该组件显示带有 array.map 的列表。

我想在“删除”任务的按下添加删除功能

问题顺序：

当我单击“创建任务”按钮时，它会向我显示带有两个文本输入字段的模式：任务名称和描述。

当我创建一个任务时，它在数组任务中运行良好。但是当我在字段中重新输入时：任务被删除。我的印象是在进行更改时调用了 deleteItem 函数..

删除函数被调用。我以为是来自onPress()但我感觉每次都启动它的人...

const Task =(props) =>{
    return (
      <View style={styles.task}>
        <View style={{ flex:1,flexDirection:"row",justifyContent:'space-between',marginTop:15,}}>
          <Text style={styles.TextTasks }> {props.text}</Text>
          <TouchableOpacity onPress={props.deleteitem}>
          <Text style={{ color: 'red' }}>Supprimer</Text>
        </TouchableOpacity>
          </View>
      </View>
        );
  }
const Buttons = (props)=>{
  return(
  <View style={styles.container}>
    <View style={styles.SectionStyleAdd}>
      <TouchableOpacity onPress={props.press}  style={{flexDirection:"row",justifyContent:"center",alignItems:"center",width:200}} >
        <Image source={require('./Icon/add.png')} style={styles.ImageStyle} />
            <Text> Créer une tâche</Text>
        </TouchableOpacity>
    </View>
        </View>
  )
}
export default function HommeScreen(props) {
    const [isFocused, setisFocused] = useState(false);
  const [tasks, settasks] = useState([]);
    const [taskName,settaskName] = useState("");
    const [taskDescription, settaskDescription] = useState("");
    const [showModal, setShowModal] = useState(false);

    const   deleteItem = (index) => {
        console.log("salut")
        const tmp= tasks.splice(index,1)
        console.log(tmp)
    };
    const addItem = event => 
        {
        settasks([
            ...tasks,
            {
                id: tasks.length,
                name: taskName,
                description:taskDescription,
            }
        ]);
        settaskName("");
        settaskDescription("");
        console.log(tasks)
    };
    
    const handlefocus = (event) =>{
        setisFocused({isFocused:true})
        if(props.onFocus){
            props.onFocus(event);
    }
}
    const handlebutton=()=>{
        setShowModal(!showModal);
}
  return (
<View style={{ flex:1 }}>
    <Modal 
        onBackButtonPress={() =>handlebutton()}
        isVisible={showModal}
        transparent={true}
  >
        <View style={{ backgroundColor:"white",height:400,marginTop:300,padding:40,borderRadius:50}}>
            <TextInput   
                style={{height: 40,width:300}}  
                selectionColor={isFocused ? BLUE : LIGHT_GREY} 
                underlineColorAndroid={"#D3D3D3"} 
                placeholder="Nom tâches:" 
                value={taskName}
                onChangeText={tasks => settaskName(tasks)} >
            </TextInput >

            <TextInput   
            style={{height: 40,width:300}}
            value={taskDescription}
            selectionColor={isFocused ? BLUE : LIGHT_GREY} 
            underlineColorAndroid={"#D3D3D3"} 
            placeholder="Description de la tâches:" 
            onChangeText= {taskDescription => settaskDescription(taskDescription)} 
            >
            </TextInput >
            <TouchableOpacity style={{height:30,width:100,borderColor:BLUE,borderWidth:2,borderRadius:50,justifyContent:"center"}}
                onPress={()=>addItem()}>
                <Text> Créer la tâche</Text>
            </TouchableOpacity>
        </View>
    </Modal>
    <View style={{ flex: 1, marginTop:50}}>
      <View style={{flexDirection:"row"  }}>
        <SearchBar/>
      </View>
      <View>
        <Text style={ styles.title }> Tâche à faire:</Text>
      </View>
            {tasks.length ? (
        <ScrollView>
          <View>
            {tasks.map((element,index) => {
                            console.log("element: "+element.name,index)
              return <Tasks  deleteitem={deleteItem(index)} key={element.id} text={element.name}  />;
            })}
          </View>
        </ScrollView>
        ) : (
          <View style={{ justifyContent: 'center', alignItems: 'center', flex: 1 }}>
            <Text>Aucune Tâches</Text>
          </View>
        )}
        <View style={{ marginTop:15 }}>
        </View>
        <ScrollView style={{ position:"absolute",bottom:0,right:0,marginBottom:30,marginRight:25}}>
        <Buttons press={handlebutton}></Buttons>
        </ScrollView>
    </View>

</View>
    
  );
}

感谢帮助 ：）

4

1 回答 1

0

在映射任务的滚动视图中，试试这个

<ScrollView>
          <View>
            {tasks.map((element,index) => {
              console.log("element: "+element.name,index)
              return <Tasks  deleteitem={()=>deleteItem(index)} key={element.id} text={element.name}  />;    //changed deleteitem
            })}
          </View>
</ScrollView>
于 2020-12-15T10:58:11.517 回答