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

    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在父组件中声明，并作为道具传递给子组件，因此只要在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}/>

Answer 2

添加componentWillReceiveProps，然后设置为道具进行陈述。

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

Answer 3

首先，我不知道您在哪里定义状态。我假设第一个state表达式正在使用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生命周期中进行。

这里是演示。 https://codesandbox.io/s/kx2x4r3185

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

3 个答案: