Javascript 从用户信息返回值并在输入中显示

我想检查用户是否已登录，如果用户已登录，则应将其名字返回到输入中，并且当输入中有值时，应禁用输入

这是handleChange

    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
        })
    }
}

---

问题是，我确实得到了值，它显示在输入中，但它没有被禁用。但当我重新加载页面时，它将被禁用。我遗漏了一些内容。

添加组件将接收道具，然后将道具设置为状态

constructor(){
  super(props);
  this.state = {
    disabled: this.props.disabled
  };
}
componentWillReceiveProps(nextProps) {
  if (nextProps.disabled !== this.state.disabled) {
    this.setState({disabled: nextprops.disabled});
  } 
}

<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}/>

constructor（）{
超级（道具）；
此.state={
disabled：this.props.disabled
};
}
组件将接收道具（下一步）{
if（nextrops.disabled！==this.state.disabled）{
this.setState（{disabled:nextrops.disabled}）；
} 
}

首先，我不知道你在哪里定义你的状态。我假设第一个

状态

表达式使用ES7语法，并且您正确地传递了道具。那么你应该这样做

  constructor(props) {
    // if you do not include this this.props will be undefined here
    super(props); 
    this.state = {
      name: props.auth ? "First Name" : "",
    }
  }

其中auth是决定用户是否登录的身份验证

另一种情况可能是在实例化组件时没有传递道具。安全的方法是在componentDidMount生命周期中进行

---

这是演示

由于副作用，componentWillReceiveProps不推荐使用。查看此博客了解更多详细信息

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

由于onChange事件处理程序函数handleChange在父组件中声明，并作为道具传递给子组件，因此每当发生onChange时，如果在其中设置state，就会调用子组件，因此每次调用此组件时都会调用构造函数

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}/>

构造函数（道具）{
超级（道具）；
此.state={
禁用：！this.props.getUserDataLogin.data.first_name？false:true，
first_name:！this.props.getUserDataLogin.data.first_name？”“：this.props.getUserDataLogin.data.first_name
}
}

我已经编辑了我的问题并添加了我的组件WillReceiveProps将您的输入禁用为disabled={this.state.disabled}@eibersjiI我已经编辑了我的问题并添加了组件WillReceiveProps组件WillReceiveProps不推荐使用，但您仍然可以使用不安全的组件WillReceiveProps（）。否则，只需使用componentDidMount或shouldComponentUpdate并将nextState与previousState进行比较。

  constructor(props) {
    // if you do not include this this.props will be undefined here
    super(props); 
    this.state = {
      name: props.auth ? "First Name" : "",
    }
  }

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}/>