javascript - 从用户信息返回一个值并将其显示在输入中

Question

我想检查用户是否登录，如果用户登录，那么他们的名字应该返回到输入，并且当里面有值时应该禁用输入。

  <label for="firstName" className="col-form-label-sm">First Name</label>
    <input type="text" className="form-control form-control-sm" placeholder="John" name="first_name" onChange={this.props.handleChange} value={this.props.first_name} disabled={this.props.disabled}/>

这里是状​​态

state = {
    first_name: !this.props.getUserDataLogin.data.first_name ? "" : this.props.getUserDataLogin.data.first_name,
}

这是句柄更改

    handleChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value
    })
}

编辑:我也有

componentWillReceiveProps = (nextProps) => {

        if(nextProps.getUserDataLogin.data !== this.props.getUserDataLogin.data){
        var { data } = nextProps.getUserDataLogin
        this.setState({
            first_name: data.first_name,
            disabled: true,
            createNewAccount: false,
            me: true
        })
    }
}

问题是，我确实得到了值并且它显示在输入中，但它没有被禁用。当我重新加载页面时它会被禁用。我在这里错过了一些东西。

Answer 1

componentWillReceiveProps 由于副作用已被弃用，不建议使用。查看此博客了解更多详细信息

https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html

但是你仍然可以在没有 componentWillReceiveProps 的情况下实现你想要的。

由于onChange事件处理函数handleChange是在父组件中声明的，并作为 Prop 传递给子组件，每当onChange发生时，如果您在其中执行setState，子组件就会被调用，因此每次调用该组件时都会调用构造函数。

constructor(props){
   super(props);
      this.state = {
          disabled: !this.props.getUserDataLogin.data.first_name ? false : true,
          first_name: !this.props.getUserDataLogin.data.first_name ? "" : this.props.getUserDataLogin.data.first_name
      }
 }

 <input type="text" className="form-control form-control-sm" placeholder="John" name="first_name" onChange={this.props.handleChange} value={this.props.first_name} disabled={this.state.disabled}/>