React项目中子组件SignInSide如何更新父组件Login的state？

核心实现逻辑 #

父组件将定义好的状态更新方法通过props传递给子组件，子组件触发交互事件时调用传入的props方法即可触发父组件的状态更新逻辑。

1. 修改父组件Login代码 #

仅需要修改render方法中SignInSide组件的传参部分，完整修改后代码如下：

export default class Login extends Component {
  constructor(props) {
    super(props);
    this.onChangeUsername = this.onChangeUsername.bind(this);
    this.state = {
      username: ""
    };
  }
  onChangeUsername(e) {
    this.setState({
      username: e.target.value
    });
  }
  render() {
    // 新增props传递，将父组件的onChangeUsername方法传给子组件
    return (
        <SignInSide onChangeUsername={this.onChangeUsername} username={this.state.username}></SignInSide>
    );
  }
}

可选传递username属性用于子组件输入框回显父级状态值

2. 修改子组件SignInSide代码 #

接收父组件传入的props，绑定到用户名输入框的onChange事件上：

export default function SignInSide(props) {
  return (
          <form className={classes.form}>
            {/* 绑定onChange事件和value值为父组件传入的props */}
            <TextField value={props.username} onChange={props.onChangeUsername}/>
            <Button>
              Login
            </Button>
          </form>
  );
}

完成上述修改后，子组件内用户名输入框的内容变动会直接触发父组件onChangeUsername方法，同步更新父组件的state.username值。

内容的提问来源于stack exchange，提问作者Fynn