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

我一直试图插入输入字段＆＃39;获取对象数组的值 - 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' 
     } 
    });
}

从反应组件中提取输入参数

1 个答案: