IT技术 - 为什么即使使用 onChange 侦听器也无法更改 React 中的输入值 - 吾爱随笔录

为什么即使使用 onChange 侦听器也无法更改 React 中的输入值

IT技术 javascript reactjs state onchange

2021-05-21 03:26:14

我对 React 很陌生，在学习了一些教程后，我尝试了我的以下代码。

我制作了一个组件，将props从商店传递给它，然后componentWillMount我为组件创建了一个新状态。渲染到现在都没问题。

接下来，我将我state的值绑定到输入框的值，并且我也有onChange监听器。尽管如此，我无法改变我在该领域的value观。

因为，我从角的背景是，我假设输入的值绑定状态像下面会自动更新属性name的state对象。我在这里错了吗？

componentWillMount(){
    this.setState({
        updatable : false,
        name : this.props.name,
        status : this.props.status
    });
}

//relevant DOM from component's render function
<input className="form-control" type="text" value={this.state.name} id={'todoName' + this.props.id} onChange={this.onTodoChange.bind(this)}/>

onTodoChange(){
    console.log(this);
    //consoling 'this' here, shows old values only.
    //not sure how and even if I need to update state here.
    // Do I need to pass new state to this function from DOM
    //TODO: send new data to store
}

我的onTodoChange函数控制台的值与this初始化时的状态值相同。我如何通过在输入框中输入来更改状态，以便我可以将它们发送到商店？

4个回答

与 Angular 的情况不同，在 React.js 中你需要手动更新状态。你可以这样做：

<input
    id={'todoName' + this.props.id}
    className="form-control"
    type="text"
    value={this.state.name}
    onChange={e => this.onTodoChange(e.target.value)}
/>

然后在函数中：

onTodoChange(value){
        this.setState({
             name: value
        });
    }

此外，您可以在组件的构造函数中设置初始状态：

  constructor (props) {
    super(props);
    this.state = {
        updatable: false,
        name: props.name,
        status: props.status
    };
  }

如果您只想更改状态变量而不在顶部声明新函数，则可以通过内联函数执行快捷方式：

<input type="text" onChange={e => this.setState({ text: e.target.value })}/>

我认为这对你来说是最好的方式。

你应该添加这个：this.onTodoChange = this.onTodoChange.bind(this)。

你的函数有 event param(e)，并获得value：

componentWillMount(){
        this.setState({
            updatable : false,
            name : this.props.name,
            status : this.props.status
        });
    this.onTodoChange = this.onTodoChange.bind(this)
    }
    
    
<input className="form-control" type="text" value={this.state.name} id={'todoName' + this.props.id} onChange={this.onTodoChange}/>

onTodoChange(e){
         const {name, value} = e.target;
        this.setState({[name]: value});
   
}

在 React 中，只有当 state 或 prop 发生变化时，组件才会重新渲染（或更新）。

在您的情况下，您必须在更改后立即更新状态，以便组件将使用更新状态值重新呈现。

onTodoChange(event) {
        // update the state
    this.setState({name: event.target.value});
}

其它你可能感兴趣的问题

上一篇我应该使用什么类型的灯丝来制作邮票？下一篇将全彩色图形贴花应用到 3D 打印部件表面的方法？