React JS：如何设置孙子国家

Question

我是初学者React程序员，正在努力理解我应该如何处理孙子国家（或者看看是否有一个孙子国家的好主意）。

我的问题是......

1.是否有可能通过this.setState((prevState))改变孙子孙女？

让孙子孙女成为一个坏主意吗？

为了说明，这是组件的构造函数。

constructor(props) {
 super(props);
 this.state = {
   input: {
     example: "",
   },
   invalid:{
     example: false
   },
 };
 this.handleChange = this.handleChange.bind(this);
 this.submit = this.submit.bind(this);
}

我认为this.state.invalid是一个孩子，而this.state.invalid.example是一个孙子。

这是一个JSX。

<div className="input">
   <input type="text" value={this.state.input.example || ''} onChange={this.handleChange} />
   { this.state.invalid.example ? <span> This input is invalid </span> : null }
</div>
//Here are similar input fields...

<button onClick={this.submit} type="button">Submit</button>

当onClick={this.submit}被触发时，我想验证函数中的输入'this.submit'。

submit(){
 for (var key in this.state.input) {
   if(!this.state.input[key]){
     this.setState((prevState, key) => ({
        invalid[key]:true, //This causes an error, saying that "SyntaxError: Unexpected token, expected ,"
    }));
   }
 }

在这个例子中，this.state.invalid.example应该被设置（即改变），但上面的代码不起作用。

也许分解这个应用程序并使<div className="input">成为一个组件会更好。在此之前，我想澄清是否有可能以这种方式设置孙子孙女。

由于我不认识我周围的人正在学习ReactJS，所以我们将不胜感激！