对于动态字段，ReactJS字段不可编辑

我需要通过JSON动态创建字段。 我已经根据需要创建了我的组件，并使用必需的字段呈现页面。 但是这些字段处于不可编辑状态，即使我在InputField js文件中有一个onchange函数。下面是我的组件中的代码部分

onChange(event) {
        this.setState({
            [event.target.name]: event.target.value
        })
    }
    render() {
        return (
          this.props.screenField.fieldType === 'INPUT'
            ? <div className='form-group'>
                    <label htmlFor={this.props.screenField.name}>{this.props.screenField.label}:</label>
                    <input type={this.props.screenField.dataType === 'BOOLEAN'
                        ? 'checkbox'
                        : this.props.screenField.dataType}
                        name={this.props.screenField.name}
                        id={this.props.screenField.name}
                        placeholder={this.props.screenField.helpText}
                        required={this.props.screenField.isRequired}
                        value={this.props.screenField.value} className='form-control'
                        onChange={this.onChange.bind(this)}/>
                </div>
            : null
          )
    }

onChange（事件）{
这是我的国家({
[event.target.name]：event.target.value
})
}
render（）{
返回(
this.props.screenField.fieldType===“输入”
? 
{this.props.screenField.label}：
：null
)
}

请在下面找到完整代码的URL

---

React的理念是，道具应该是不可变的，如果需要更改某些内容，可以使用状态

将值绑定到状态not props。在构造函数中，设置初始状态：

constructor(props) {
  super(props);
  this.state = {[this.props.screenField.name] : this.props.screenField.value};
}

绑定到状态：

value={this.state[this.props.screenField.name]} className='form-control'

---

您可能希望将所有逻辑移出渲染函数，因为这通常是一种良好的做法。render函数应该只包含以声明方式定义的组件，就像HTML一样

您似乎缺少的一件事是用于计算JSX内表达式的大括号。现在返回语句中的任何内容都应包含在{}中：

{this.props.... === 'INPUT' ? ... : ...}

---

如前所述，考虑将该渲染移动到外部。也许你可以在返回之前使用if语句。另一个选项是将div提取到它自己的组件中（或者只是从助手函数返回它）。

那么问题是什么？单击onSubmit时如何传递所有这些字段？onSubmit事件在哪里？我将在这里保留状态原则，但将其向上移动，以便输入的形式或父级保持状态，并且也可以是onChange函数所在的位置。然后，您可以将onChange函数作为一个道具传递。我的提交是以父表单的形式进行的，即向上两级提交此表单OK，将状态向上移动到表单，然后您可以在onSubmit事件中从表单状态获取所有值。除此之外还有其他方法吗？？因为我需要在所有家长中创建一个方法，并从孩子那里调用它的家长，这是一种错误，我相信。。。还是我错了？？