如何更改json键与“onchange”反应？

I have some problem. I have got a form with to input. 1 input - key, 2 input - value. I need to change the values in the states when changing the value in the input fields, but I don't know how to do it. Json must be in this format only.

我有一些问题。我有一个输入表单。 1输入 - 键,2输入 - 值。我需要在更改输入字段中的值时更改状态中的值,但我不知道如何操作。 Json必须只有这种格式。

myjson = {
'hello': 'world',
'foo':'bar',
'bar':'foo',
'How':'are u'
 }

I'm set to inputs onChange event and this function

我设置输入onChange事件和这个函数

    this.setState({
       variables: {
         ...this.state.variables, [this.props.fix]: {
           ...this.state.variables[this.props.fix],[this.props.parentkey]: e.target.value
    }
  }
})

But the problem remains, because [this.props.parentkey] will always be one, since the values of key are kept in the e.target.value. If I change it to [e.target.value]:e.target.value a bunch of new elements will be generated, and not one instead of the old one

但问题仍然存在,因为[this.props.parentkey]将始终为1,因为key的值保存在e.target.value中。如果我将其更改为[e.target.value]:e.target.value将生成一堆新元素,而不是一个新元素而不是旧元素

my inputs

<ValidationForm onSubmit={this.handleSubmit}>
<FormGroup>
      <TextInput name="parentkey"
                 onChange={this.Change}
                 value={this.state.parentkey}
      />
</FormGroup>
<FormGroup>
      <TextInput name="customvalue"
                 onChange={this.Change}
                 value={this.state.translate}
      />
</FormGroup>
<button>Save</button>
</ValidationForm>

How to be in this situation?

如何在这种情况下?

1 个解决方案

#1

this.state={

 parentkey: '',
 transalte: '',

}

change = (e) => {
  this.setState({
   [e.target.name]: e.target.value,
 })

 }

Now the Html Part

现在的Html部分

       <ValidationForm onSubmit={this.handleSubmit}>
      <FormGroup>
  <TextInput name="parentkey"
             onChange={this.Change}
             value={this.state.parentkey}
       />
    </FormGroup>
     <FormGroup>
      <TextInput name="translate"
             onChange={this.Change}
             value={this.state.translate}
  />
  </FormGroup>
  <button>Save</button>
 </ValidationForm>