Question

我在reactJs中创建了此表单发票注册。

表单应处理输入数组（标有红色轮廓）。每当onChange事件发生在输入上。所有输入都接收相同的值。如何正确地处理这个？我打算使用此输入值生成如下所示的数据：

[
    {
        invoice_number:102947303364,
        invoice_registration_no : 1235
    },
    {
        invoice_number:102947109177,
        invoice_registration_no : 6578
    },
]

提前感谢您的帮助。

Answer 1

我不知道哪个是DB中的主键，所以我假设invoice_number是主键。

class CustomList extends React.Component {
  constructor(props){
    super(props);
    this.handleInputChange = this.handleInputChange.bind(this);
    this.renderList = this.renderList.bind(this);
    
    this.state = {
      data: [
          {
              invoice_number:102947303364,
              invoice_registration_no : 1235,
              some_value: '',
          }, {
              invoice_number:102947109177,
              invoice_registration_no : 6578,
              some_value: '',
          },
      ],
    }
  }
  
  handleInputChange(e){
    const {id, value} = e.target;
    let {data} = this.state;
    const targetIndex = data.findIndex(datum => {
      return datum.invoice_number == id;
    });

    if(targetIndex !== -1){
      data[targetIndex].some_value = value;
      this.setState({data});
    }
  }
  
  renderList() {
      const {data} = this.state;
      let content = data.map(datum => {
        return (
          <li id={datum.invoice_number}>
            <p>{datum.invoice_number}</p>
            <input type="text" id={datum.invoice_number} value={datum.some_value}
              onChange={this.handleInputChange}/>
          </li>
        )
      });
      return (
        <ul>
          {content}
        </ul>
      )
  }
  
  render() {
    const myList = this.renderList();
    return (
      <div>
        {myList}
      </div>
    );
  }
}
ReactDOM.render(
  <CustomList/>,
  document.getElementById('root')
)

<html>
  <body>
    <div id="root"></div>
  </body>
</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

您需要看到的是handleInputChange方法绑定到CustomList类和renderList。

我只是在每个输入处将id属性设置为invoice_number，并使用Array.prototype.findIndex查找已更改的输入索引。

reactjs如何正确处理输入数组的值更改

1 个答案: