Question

我有一个表单输入，并且我将我的值设置为来自道具的初始状态。现在，我有了一个handleChange函数，当我尝试输入Form Input时，它会触发onChange，但该值根本不会改变。

  handleChange(e){
    this.setState({
      [e.target.name]: e.target.value,
    });
    console.log('handle change', this.state.firstName)
  }

console.log返回初始状态，即使我在键盘上键入，它仍然返回初始状态。这是我的handleChange()

这是我的初始状态：

    this.state = {
      firstName: this.props.profiles.selectedProfile.first_name
    }

这是我的输入内容

<Form.Input 
label="First Name"
value={this.state.firstName}
placeholder="Jose"
onChange={this.handleChange}
/>

当我仅在状态中声明了一个空字符串但现在我的初始状态来自我的道具时，此方法将不起作用。

Answer 1

您说的是[e.target.name]: e.target.value或name = value，但您没有发送姓名字段。

此代码应解决此问题。

<Form.Input 
label="First Name"
name='firstName'
value={this.state.firstName}
placeholder="Jose"
onChange={this.handleChange}
/>

此外，您需要在构造函数中将handleChange绑定到此，我认为您没有这样做。

  constructor(props) {
    super(props)
    this.handleChange = this.handleChange.bind(this)
  }

console.log('handle change', this.state.firstName)不会为您提供最新的状态值，因为setState是异步的，如果要获取最新的状态值，请使用setState的回调。

Answer 2

我认为您应该使用this.setState在componentDidMount中设置状态

componentDidMount(){
    this.setState({firstName : this.props.profiles.selectedProfile.first_name});
}

Answer 3

因为道具是immutable在React上。

如果将道具分配给一个状态，则该状态也将是不可变的，因为状态的值是不可变的值。

为了更好地理解，我将对其进行仿真：

var a = 0;
var b;
a = b;
// it means b = a too

如果您更改b，则a也将更改。

因此，您分配的状态的值是不可变的值，该状态将变为不可变的。

我希望它可以帮助您理解它。有关更多信息：https://reactjs.org/docs/components-and-props.html