如何在子组件中设置状态？

Question

假设我有一个组件。

在该组件内部，我调用了一个子组件。

那个子组件有一个状态，我想从父组件中设置它。

组件

// component
// ...

setState( 1 );

<ChildComponent ???setStateFunc={setState}???> // This setState should point to the child function

setState( 2 );

// ...
// end component

子组件

// child component
// ...

const [state, setState] = useState(null);

// ...
// end child component

我该怎么做？

Answer 1

如果您希望您的父组件状态应该从子组件更新，请像这样处理您的状态：

将此添加到您的父组件文件：

this.state = {
    value: 0
}
...

changeHandler = (e) => {
   this.setState({value: e})
}

...

//Pass this function like this 
<ChildComponent value={{this.state.value}} setValue={(e) => changeHandler(e)}>

并通过设置 子组件 文件中的任何值来管理您的 setValue，例如：

...

//For example if you're using TextInput component
<TextInput 
    value={this.props.value}
    onChangeText={this.props.setValue}
/>
...

希望这对你有用。