如何调用这个添加函数答案

【问题标题】：how to call this add function如何调用这个添加函数
【发布时间】：2022-01-15 16:16:51
【问题描述】：

我正在使用 andSubject 函数在父组件中设置主题，但它不起作用有人可以帮助我如何在按下 RoundedButton 时调用 addSubject 吗？

...
const [tempItem, setTempItem] = useState(null);
.....
        <View style={styles.inputContainer}>
          <TextInput
            style={styles.textInput}
            onSubmitEditing={({ nativeEvent }) => {
              setTempItem(nativeEvent.text);
              // addSubject(nativeEvent.text);
            }}
          />
          <RoundedButton
            title="+"
            size={50}
            onPress={() => addSubject(tempItem)}
          />
        </View>
...

【问题讨论】：

标签： android ios reactjs react-native

【解决方案1】：

我猜你正在寻找这样的东西：

const [tempItem, setTempItem] = React.useState("");
const [addSubject , setAddSubject] = React.useState("");
        

...
      return (
        <View style={styles.container}>
          <View style={styles.inputContainer}>
          <Text>this text bellow will show after pressing on the button :</Text>
          <Text>{addSubject}</Text>
              <TextInput
                style={styles.textInput}
                onChangeText={setTempItem}
              />
              <Button
                title="+"
                size={50}
                onPress={() => setAddSubject(tempItem)}
              />
            </View>
        </View>
      );
    }

...

demo

【讨论】：

【解决方案2】：

你必须通过道具将函数传递给孩子。

父.js

  function setAddSubject(item){
    console.log(item)
}

    <YourForm call={(item)=>setAddSubject(item) }  />

YourForm.js

    export default =(props)=>{
       const [tempItem, setTempItem] = useState(null);
    return (
           <View style={styles.inputContainer}>
          <TextInput
            style={styles.textInput}
            onSubmitEditing={({ nativeEvent }) => {
              setTempItem(nativeEvent.text);
              // addSubject(nativeEvent.text);
            }}
          />
          <RoundedButton
            title="+"
            size={50}
            onPress={() => props.call(tempItem)}
          />
        </View>
          );
     }

【讨论】：

它不工作