我对React很新,经过一些教程后,我正在尝试下面的代码。
我创建了一个组件,从商店向它传递道具,componentWillMount
我为组件创建了一个新状态。渲染很好,直到现在。
接下来,我将state
绑定到输入框的值,我也有onChange
个侦听器。不过,我无法在现场改变自己的价值观。
因为,我来自Angular背景,我假设绑定输入的值如下所示将自动更新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
的值与初始化时的状态值相同。如何通过输入输入框来改变状态,以便我可以将它们发送到商店。
答案 0 :(得分:36)
与Angular的情况不同,在React.js中,您需要手动更新状态。你可以这样做:
<input
className="form-control"
type="text" value={this.state.name}
id={'todoName' + this.props.id}
onChange={e => this.onTodoChange(e.target.value)}
/>
然后在函数中:
onTodoChange(value){
this.setState({
name: value
});
}
此外,您可以在Component的构造函数中设置初始状态:
constructor (props) {
this.state = {
updatable: false,
name: props.name,
status: props.status
};
}
答案 1 :(得分:10)
如果您只想更改状态变量而不在顶部声明新功能,则可以通过内联函数执行快捷方式
<input type="text" onChange={e => this.setState({ text: e.target.value })}/>
答案 2 :(得分:1)
在反应过程中,只有当状态或道具发生变化时,组件才会重新渲染(或更新)。
在您的情况下,您必须在更改后立即更新状态,以便组件将使用更新状态值重新呈现。
onTodoChange(event){
// update the state
this.setState({name: event.target.value});
}
答案 3 :(得分:1)
在使用this.setState({});
进行反应之前,状态不会发生变化
这就是您的控制台消息显示旧值
答案 4 :(得分:1)
我认为这对你来说是最好的方式。
您应该添加此“ this.onTodoChange = this.onTodoChange.bind(this)'
并且您的函数具有事件参数(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});
}
答案 5 :(得分:0)
如果您想使用一个处理程序处理多个输入,请查看我的方法,其中我使用 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"
});
const handleChange = e => {
setState({
[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>
);
}