Question

我正在使用React应用程序，并且希望我正在使用的表单能够将键名和键值添加到sensorProperties：{}（sensorProperties是sensor对象的一部分）。我必须允许用户为键和值都命名。

  this.state = {
        sensor: {
            name: '',
            type: '',
            position: '',
            sensorProperties: {}
        },
        show: false,
        key: '',
        value: ''
    };

我添加了两个函数handleValueChange和handleKeyChange。当我调用console.log（key，value）时，我看到它们具有我的输入值，但是如何将这些值传递给我的sensorProperties？

handleKeyChange = (event) => {
    const nKey = event.target.value
    this.setState({key: nKey})
}

handleValueChange = (event) => {
    const nValue = event.target.value
    this.setState({value: nValue})
}

 <FormGroup>
    <ControlLabel>Key</ControlLabel>
     <FormControl required type="text" value={key}  
     onChange={this.handleKeyChange}/>
 </FormGroup>

 <FormGroup>
     <ControlLabel>Value</ControlLabel>
     <FormControl required type="text" value={value} 
     onChange={this.handleValueChange}/>
 </FormGroup>

Answer 1

您可以像这样更改处理程序并设置sensorProperties：

handleKeyChange = (event) => {
    const nKey = event.target.value
    const value = this.state.value;
    const newSensor = { ...this.state.sensor };

    const newSensorProperties = {
        [nKey]: value, // dynamically set the key name
    };

    newSensor.sensorProperties = newSensorProperties;

    this.setState({
        sensor: newSensor,
        key: nKey,
    });
}

handleValueChange = (event) => {
    const nValue = event.target.value
    const key = this.state.key;
    const newSensor = { ...this.state.sensor };
    const newSensorProperties = {
        [key]: nValue, // dynamically set the key name
    };

    newSensor.sensorProperties = newSensorProperties;

    this.setState({
        sensor: newSensor,
        value: nValue,
    });
}

根据您的需要，上述方法将仅设置一个键值对，并且还接受一个空字符串作为sensorProperties的键。如果不需要，可以只添加一个空字符串检查项。主要思想是为newSensorProperties使用计算出的键名，这应该可以解决问题。

如何从表单添加键名和键值？

1 个答案: