反应状态不更新并重置为原始状态
React State not updating and getting reset to original state
我在这里遇到了一个非常奇怪的问题。我正在使用 react-toggle 依赖来仅 return true/false 某些输入的值。
基本上我正在做的是使用 react-toggle 输入的回调函数来更新我的反应状态的值。出于某种原因,它只会更新已更改的最后一个输入,而其他输入将变为错误。
我的代码如下所示:
RandomComponent.js
<ToggleComponent title="TestA"/>
<ToggleComponent title="TestB"/>
<ToggleComponent title="TestC"/>
<ToggleComponent title="TestD"/>
ToggleComponent.js
constructor(props){
super(props);
this.state={
testA:false,
testB:false,
testC:false,
testD:false,
}
}
updateCheckValue(title){
if(title === 'TestA'){
this.setState({
testA: !this.state.testA
}, ()=>{
console.log(this.state)
})
}
if(title === 'TestB'){
this.setState({
testB: !this.state.testB
}, ()=>{
console.log(this.state)
})
}
if(title === 'TestC'){
this.setState({
testC: !this.state.testC
}, ()=>{
console.log(this.state)
})
}
if(title === 'TestD'){
this.setState({
testD: !this.state.testD
}, ()=>{
console.log(this.state)
})
}
}
render(){
return(
<Row className={styles.container}>
<Col sm={1} md={1} lg={1}></Col>
<Col sm={2} md={2} lg={2}>
<Toggle
onChange={this.updateCheckValue.bind(this, this.props.title)}
icons={false} />
</Col>
<Col sm={8} md={8} lg={8}>
<h4>{this.props.title}</h4>
</Col>
<Col sm={1} md={1} lg={1}></Col>
</Row>
)
}
你应该改变这里的方法,状态应该由RandomComponent.js, ToggleComponent.js管理每次调用时都应该调用回调。
结果应该是这样的:
RandomComponent.js
constructor(props){
super(props);
this.state={
testA:false,
testB:false,
testC:false,
testD:false,
}
}
updateCheckValue(att){
this.setState({
[att]: !this.state[att]
}, ()=>{
console.log(this.state)
})
}
}
render(){
<ToggleComponent title="TestA" onToggle={() => this.updateCheckValue("testA")}/>
<ToggleComponent title="TestB" onToggle={() => this.updateCheckValue("testB")/>
<ToggleComponent title="TestC" onToggle={() => this.updateCheckValue("testC")/>
<ToggleComponent title="TestD" onToggle={() => this.updateCheckValue("testD")/>
}
ToggleComponent.js
<Row className={styles.container}>
<Col sm={1} md={1} lg={1}></Col>
<Col sm={2} md={2} lg={2}>
<Toggle
onChange={this.props.onToggle}
icons={false} />
</Col>
<Col sm={8} md={8} lg={8}>
<h4>{this.props.title}</h4>
</Col>
<Col sm={1} md={1} lg={1}></Col>
</Row>
我在这里遇到了一个非常奇怪的问题。我正在使用 react-toggle 依赖来仅 return true/false 某些输入的值。
基本上我正在做的是使用 react-toggle 输入的回调函数来更新我的反应状态的值。出于某种原因,它只会更新已更改的最后一个输入,而其他输入将变为错误。
我的代码如下所示:
RandomComponent.js
<ToggleComponent title="TestA"/>
<ToggleComponent title="TestB"/>
<ToggleComponent title="TestC"/>
<ToggleComponent title="TestD"/>
ToggleComponent.js
constructor(props){
super(props);
this.state={
testA:false,
testB:false,
testC:false,
testD:false,
}
}
updateCheckValue(title){
if(title === 'TestA'){
this.setState({
testA: !this.state.testA
}, ()=>{
console.log(this.state)
})
}
if(title === 'TestB'){
this.setState({
testB: !this.state.testB
}, ()=>{
console.log(this.state)
})
}
if(title === 'TestC'){
this.setState({
testC: !this.state.testC
}, ()=>{
console.log(this.state)
})
}
if(title === 'TestD'){
this.setState({
testD: !this.state.testD
}, ()=>{
console.log(this.state)
})
}
}
render(){
return(
<Row className={styles.container}>
<Col sm={1} md={1} lg={1}></Col>
<Col sm={2} md={2} lg={2}>
<Toggle
onChange={this.updateCheckValue.bind(this, this.props.title)}
icons={false} />
</Col>
<Col sm={8} md={8} lg={8}>
<h4>{this.props.title}</h4>
</Col>
<Col sm={1} md={1} lg={1}></Col>
</Row>
)
}
你应该改变这里的方法,状态应该由RandomComponent.js, ToggleComponent.js管理每次调用时都应该调用回调。 结果应该是这样的: RandomComponent.js
constructor(props){
super(props);
this.state={
testA:false,
testB:false,
testC:false,
testD:false,
}
}
updateCheckValue(att){
this.setState({
[att]: !this.state[att]
}, ()=>{
console.log(this.state)
})
}
}
render(){
<ToggleComponent title="TestA" onToggle={() => this.updateCheckValue("testA")}/>
<ToggleComponent title="TestB" onToggle={() => this.updateCheckValue("testB")/>
<ToggleComponent title="TestC" onToggle={() => this.updateCheckValue("testC")/>
<ToggleComponent title="TestD" onToggle={() => this.updateCheckValue("testD")/>
}
ToggleComponent.js
<Row className={styles.container}>
<Col sm={1} md={1} lg={1}></Col>
<Col sm={2} md={2} lg={2}>
<Toggle
onChange={this.props.onToggle}
icons={false} />
</Col>
<Col sm={8} md={8} lg={8}>
<h4>{this.props.title}</h4>
</Col>
<Col sm={1} md={1} lg={1}></Col>
</Row>