提取输入参数反应成分

Question

我输入组件接收index道具看起来是这样的：

renderLibraryInputForm(props) { 
    return (
     <Grid> 
      <Row> 
       <Col xs={6} md={3}> 
        <FormGroup> 
        <ControlLabel>Library Name</ControlLabel> 
        <input 
         type="text" 
         className="form-control" 
         name={`libraryName${props.index}`} 
         onChange={this.onAddLibraryInputChange.bind(this, `libraryName${props.index}`)} 
        /> 
        </FormGroup> 
       </Col> 
       <Col xs={6} md={2}> 
        <FormGroup> 
        <ControlLabel>Available Status</ControlLabel> 
        <input 
         type="text" 
         className="form-control" 
         name={`availableStatus${props.index}`} 
         onChange={this.onAddLibraryInputChange.bind(this, `availableStatus${props.index}`)} 
        /> 
        </FormGroup> 
       </Col> 
       ... 
      </Row> 
     </Grid> 
    ) 
} 

onAddLibraryInputChange功能如下：

onAddLibraryInputChange(name, event) { 
    let inputFields = {} 
    inputFields[name] = event.target.value 
    let inputValues = {} 
    this.setState({inputValues}) 
} 

我一直在试图插入输入字段值来获取对象数组 - inputValues对象setState - 具有此形状：

[{name: "Sunnyvale", status: "Available", distance: 7}, {name: "Palo Alto", 
    status: " Not Available", distance: 12}, ...] 

其中Sunnyvale和7分别是数组索引0的输入字段1和3的值; Palo Alto和12分别是数组索引1的输入字段1和3的值; ...

非常感谢您的建议。

Answer 1

似乎对我来说，你总是设置状态为空的对象在你的处理器

onAddLibraryInputChange(name, event) { 
    let inputFields = {} 
    inputFields[name] = event.target.value 
    let inputValues = {} <-- input values is always an empty object 
    this.setState({inputValues}) 
} 

你为什么不尝试直接设置对象的状态和使用索引？

好像你是路过该索引中的处理程序，以便尝试是这样的：

onAddLibraryInputChange(event, index) { 
    const target = event.target; 
    const name = target.name; 

    this.setState({ 
    [index]:{ 
     'name': name, 
     'status':'X', 
     'distance':'Y' 
    } 
    }); 
}