Question

<input
  defaultValue={this.props.str.name}
  ref={(input) => { this.state.name = input; }}
  name="name"
  type="text"
  className="form-control"
  onChange={this.handleInputChange}
/> 

handleInputChange(event) {
  this.setState({
    [event.target.name]: event.target.value
  });
}

if(this.state.name.value === "") {
  this.msg.show('Required fields can not be empty', {
    time: 2000,
    type: 'info',
    icon: <img src="img/avatars/info.png" role="presentation"/>
  });
}

我试图像这样设置默认值，并且也想访问它。我确实喜欢这个，并使用this.state.name.value访问了该值，但事情是它的工作，但显示警告为

不要直接改变状态，使用setState（）反应/非直接突变状态。

Answer 1

获取“不要直接改变状态，使用setState（）”，为什么？

因为，你正在改变ref回调方法中的状态值来存储节点ref，在这里：

this.state.name = input;

<强>解决方案：

不要使用状态变量来存储引用，可以直接存储它们在组件实例中，因为它不会随着时间而改变。

根据 DOC ：

状态包含可能更改的特定于此组件的数据   随着时间的推移。状态是用户定义的，它应该是普通的   JavaScript对象。

如果你不在render（）中使用它，它不应该处于状态。对于   例如，您可以将计时器ID直接放在实例上。

由于您使用的是 controlled input element ，因此不需要参考。直接使用带有输入元素值属性的this.state.name和this.state.name来访问该值。

使用此：

<input
    value={this.state.name || ''}
    name="name"
    type="text"
    className="form-control"
    onChange={this.handleInputChange} 
/>

如果你想使用ref然后将ref直接存储在实例上，删除value属性，你也可以删除onChange事件，像这样使用它：

<input
    ref={el => this.el = el}
    defaultValue={this.props.str.name}
    name="name"
    type="text"
    className="form-control"
/>

现在使用此ref来访问这样的值：

this.el.value

Answer 2

您可以改为在with spread运算符内部克隆整个属性值，然后重新格式化或编辑该值，例如：

state = {Counters: [{id:1,value:1},{id: 2,value: 2},{id: 3,value: 3},{id: 4,value: 4}]}
increment = (Counter) => {

        //This is where the state property value is cloned 

        const Counters = [...this.state.Counters];
        console.log(Counters);
        const index = Counters.indexOf(Counter)
        Counters[index].value++
        this.setState({
            Counters: this.state.Counters
        })
}

不要直接改变状态，在React JS中使用setState（）react / no-direct-mutation-state

2 个答案: