如何在React中从子组件设置父组件的特定状态

Question

我是React的新手。我正在尝试对表单元素进行简单的验证。我一直在验证输入数据，并将"name_error"状态设置为<p>标记内的错误消息。将我的代码留在下方

// App.js
import React, { Component } from 'react';
import ValidateName from './component/validation';
import Modal from './modal';
class Home extends Component {
state = {
show: false,
name: "",
name_error: ""
}
handleChanges = (e) => {
const name = e.target.name;
const value = e.target.value;
this.setState({[name] : value})
}
render() {
console.log(this)
return (
<div>
<div className='Main'>
{/* < Main /> */}
<button id='add' onClick={()=>{this.setState({show: true})}}>Add</button>
</div>
{this.state.show && 
<Modal>
<form>
<div className='modalContainer'>
<b className='title'>Register</b>
<button id='xmark' onClick={()=>{this.setState({show: false})}} >&times;</button>
<label for='name' >Name</label><br />
<input type="text" id='name' placeholder='Enter your name here' name="name" onChange={this.handleChanges}/><br />
< ValidateName content={this.state.name} />
<button type='submit'>Sign Up</button>
<button>Cancel</button>
</div>
</form>
</Modal>}
</div>
);
}
}
export default Home;
// Modal.js
import React, { Component } from 'react';
class Modal extends Component {
render() { 
return (
<div>
{this.props.children}
</div>
);
}
}

export default Modal;
//validation.js
class ValidateName extends Component {
err1 ='Please enter any name';
err2 = 'Use only letters in this field';
render() { 
const ren = this.props.content.length === 0 ? (<p>{this.err1}</p> ) : 
(this.props.content.match(/[a-zA-Z]+$/) ? '' : <p>{this.err2}</p>)
return ren;
}
}

当用户输入错误的时，请建议将name_error设置为"请输入任何名称"或">在此字段中仅使用字母

Answer 1

状态应该是这样的，

constructor(props){
super(props);
this.state = {
show: false,
name: "",
name_error: ""
}
}

以及使用回调的更新状态。这会很有帮助，

this.setState({[name] : value},() =>{console.log(this.state)})