Question

在构建一个表单时，该表单在一组属性评估的项目上接受用户输入的数字分级时，如何相应地设置其索引，以及在状态下捕获/更新所有输入的最佳方式是什么，从而我以后可以比较它们的总数吗？可以在下面或sandbox中找到该代码。感谢您的输入。

import React, { Component } from "react";

export default class Compare extends Component {
  constructor(props) {
    super(props);
    this.state = {
      items: props.items,
      attributes: props.attributes,
      itemAttributeScoreArray: [],
      eval: null
    };
  }

  _onChangefor = (index1, index2) => event => {
    console.log(event.target.value);
  };

  render() {
    return (
      <div>
        <table
          className="Table"
          style={{
            margin: "0 auto"
          }}
        >
          <thead>
            <tr>
              <th>Compare</th>
              <th>{this.state.items[0]}</th>
              <th>{this.state.items[1]}</th>
            </tr>
          </thead>
          <tbody>
            {this.state.attributes.map((attribute, index1) => (
              <tr>
               {attribute}
               {this.state.items.map((item, index2) =>
               <td>
                <input 
                  key = {index1+''+index2}
                  type="number"
                  onChange={this._onChangefor((index1, index2))}
                  />
                </td>)}
              </tr>
            ))}
          </tbody>

        </table>
      </div>
    );
  }
}

Answer 1

您可以假设属性和项是保留主数据的状态，因此您需要一个事务状态来保留事务，所以我试图添加一个名为“交易”的状态来保持您的输入值，

constructor(props) {
super(props);
this.state = {
  items: props.items,
  attributes: props.attributes,
  itemAttributeScoreArray: [],
  eval: null,
  transaction: []
};}

然后在componentDidMount上为交易增加价值

componentDidMount(){
let transaction = [];
this.props.attributes.map((attr,idx) =>{
  let _attributes = { attribute: attr, item:[] }
  this.props.items.map((_attr,_idx) =>{
    let _temp = _attr;
    _attributes.item.push({name: _attr, value: 0});
  })
  transaction.push(_attributes);  
})
this.setState({transaction: transaction})}

然后您可以像这样呈现输入

<tbody>
        {this.state.transaction.map((attribute, index1) => (
          <tr>
           {attribute.attribute}
           {attribute.item.map((item, index2) =>
           <td>
            <input 
              key = {index1+''+index2}
              type="number"
              value={item.value}
               onChange={this._onChangefor(attribute.attribute, index2)}
              />
            </td>)}
          </tr>
        ))}
      </tbody>

最后一件事是您需要在_onChangefor

中将输入的值作为交易的值来处理

_onChangefor = (index1, index2) => event => {
 let _val = event.target.value;
  this.setState(
        state => {
          const list = this.state.transaction.find(result => result.attribute === index1).item.map((items, j) => {
            if (j === index2) {
              items.value = _val;
              return items;
            } else {
              return items;
            }

          });
          return {
            list,
          };
        }
          );};

就这样，如果您还有其他问题，请告诉我（y）

Answer 2

您想通过道具在比较类中建立一个Key, Value对，这将更容易处理状态。因此，您的键值应该看起来像

this.state = {
    ...
    "model": {
        "Location": {
            "Choice1": "",
            "Choice2": ""
        },
        "Time": {
            "Choice1": "",
            "Choice2": ""
        },
        "Environment": {
            "Choice1": "",
            "Choice2": ""
        }
    }
}

并修改onChange事件，以发送适当的attribute和item值，如

 onChange={(e) => this._onChangefor(e, attribute, item)}

Here是我所做的更改的完整列表，并且仅在文件中起作用

在React组件中如何索引嵌套数组？

2 个答案: