提取輸入參數反應成分

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' 
    } 
    }); 
}