如何更改与反应“ onchange”的JSON键?

时间:2018-10-04 17:05:50

标签: javascript json reactjs

我有问题。我有一个要输入的表格。 1个输入-键,2个输入-值。更改输入字段中的值时,我需要更改状态中的值,但是我不知道该怎么做。 Json必须仅采用这种格式。

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

我设置为输入onChange事件和此函数

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

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

我的输入

<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>

在这种情况下怎么办?

1 个答案:

答案 0 :(得分:0)

this.state={

 parentkey: '',
 transalte: '',

}

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

 }
  

现在是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>