在React中,可以通过在一个组件中设置state来设置该组件的状态。但是,有时候我们需要将状态从一个组件传递到另一个组件。这时我们可以使用属性(prop)将状态传递给子组件。但是,如果我们需要在一个组件中编辑父组件的状态,我们需要使用回调函数来实现。
例如,一个父组件App有一个状态对象state,它包含一个名为text的属性。父组件App还有一个包含input元素的子组件Input,它需要编辑父组件的状态。这时我们可以定义一个回调函数handleChange,并将它传递给Input组件作为属性。当子组件Input中的input元素编辑时,调用该函数来更新父组件的状态。
代码示例:
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
text: 'Hello, world!'
};
}
handleChange = (event) => {
this.setState({ text: event.target.value });
}
render() {
return (
{ this.state.text }
);
}
}
const Input = (props) => {
return (
);
};
ReactDOM.render( , document.getElementById('root'));