为什么即使使用 onChange 侦听器，也不能在 React 中更改输入值

我是相当新的反应和通过一些教程后，我正在尝试我的下面的代码。

我制作了一个组件，从商店传递道具给它，在 componentWillMount上我为组件制作了一个新的状态。现在渲染还不错。

接下来，我将 state绑定到一个输入框的值，并且还有 onChange侦听器。不过，我还是不能改变我在这个领域的价值观。

因为，我是从角背景，我假设绑定输入的值状态如下将自动更新属性 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的值，该值与初始化时的状态值相同。如何通过键入输入框来改变状态，以便将它们发送到存储区？

252207 次浏览
小开

在 React 中，只有当状态或支持更改时，组件才会重新呈现(或更新)。

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

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

作为反应，状态将不会改变，直到您通过使用 this.setState({});来做到这一点。 这就是为什么您的控制台消息显示旧值。

小开
最佳答案

与 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)。

你的函数有事件 param(e)，得到值:

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

}
小开

如果您希望使用一个处理程序处理多个输入，请看一下我的方法，其中我使用 computed property根据输入的名称获取输入的值。

import React, { useState } from "react";
import "./style.css";


export default function App() {
const [state, setState] = useState({
name: "John Doe",
email: "john.doe@test.com"
});


// We need to spread the previous state and change the one we're targeting, so other data cannot be lost.
const handleChange = e => {
setState(prevState => {
...prevState,
[e.target.name]: e.target.value,
});
};


return (
<div>
<input
type="text"
className="name"
name="name"
value={state.name}
onChange={handleChange}
/>


<input
type="text"
className="email"
name="email"
value={state.email}
onChange={handleChange}
/>
</div>
);
}
小开

使用输入中的 defaultValue道具，您可以设置一个默认值，比如提取 API 并将数据放在输入中。

<input type="text" defaultValue={value} />

参考资料: https://reactjs.org/docs/uncontrolled-components.html


提交答案