在第二个函数中使用 setter 方法响应本机钩子状态更改

Question

我有 2 个函数，函数 1(( 和函数 2((

function2(){
return(
<TextInput/>
)
}
export default function1(){
const [name,setName]=useState('')
return(
<View>
{function2}
</View>
}

我在第二个函数中有一些文本输入，当用户输入某些内容时，我需要更改状态(在第一个函数中(。如何处理这种情况？

Answer 1

将处理程序函数作为 props 传递并在函数 2 中调用它。

function2(props){
//wherever you get the input call
props.handleTextInput(inputString)
return(
<TextInput/>
)
}
export default function1(){
const [name,setName]=useState('');
const handleTextInput = (name) => {
setName(name);
}
return(
<View>
<function2 handleTextInput = {this.handleTextInput} />
</View>
);
}

Answer 2

首先，您没有调用function2所以我真的不明白它是如何工作的

<View>
{function2} // you are not invoking()
</View>

但无论如何，如果你用大写字母声明Function2，你可以将其渲染为 React 组件并setName作为 prop 发送

const Function2 = ({setName}) =>{
return(
<TextInput/>
)
}
...
<View>
<Function2 setName={setName} />
</View>

或者仍然使用函数调用并发送参数

function2(setName){
return(
<TextInput/>
)
}
...
<View>
{function2(setName)}
</View>