React可编辑表格

Question

我构建了一个React表，如下所示：

const Table = ({data}) => {

    return (
        <table className="table table-bordered">
            <thead>
                <tr>
                    <th>Qty</th>
                    <th>Description</th>
                    <th>Price (£)</th>
                </tr>
            </thead>
            <tbody>
                {data.map((row) => {
                    return (
                        <tr>
                            <td><input type='number' className='form-control' step='1' min="1" value={row[0]}/></td>
                            <td><input type='text' className='form-control' value={row[1]}/></td>
                            <td><input type='text' className='form-control' placeholder='6.00' value={row[2]}/></td>
                        </tr>
                    );
                })}
            </tbody>
        </table>
    );
};

Table.propTypes = {
    data: React.PropTypes.array.isRequired
};

export default Table;

在我使用这个组件的类中，我将数据作为参数传递(该参数最初为空)：

materials: [[],[],[],[],[],[],[],[],[],[]] //Initialise with 10 empty rows 


<Table data={materials} />

这将构建一个包含10个空行的表。现在唯一的问题是，当我向表中输入数据时，我映射的数据数组不会使用我输入的数据进行更新。

​

​

我想我需要的是一些事件，在那里我可以用已经输入的快照更新数据，但我不确定如何实现这一点。任何帮助都将不胜感激。

Answer 1

例如，React不能像Angular JS那样使用双向数据绑定。props是只读的，所以您需要在它们所属的位置更新它们。

例如，声明了<Table />的父组件在其状态中可以具有materials数组，并且除了将materials作为props传递之外，它还可以传递像onCellChange(row, column)这样的函数处理程序，因此您可以将其与inputs元素中的onChange事件绑定。

就像这样，

const Table = ({data, onCellChange}) => {

 return (
    <table className="table table-bordered">
        <thead>
            <tr>
                <th>Qty</th>
                <th>Description</th>
                <th>Price (£)</th>
            </tr>
        </thead>
        <tbody>
            {data.map((row, index) => {
                return (
                    <tr key={index}>
                        <td><input type='number' className='form-control' step='1' min="1" value={row[0]} onChange={() => onCellChange(index, 0)}/></td>
                        <td><input type='text' className='form-control' value={row[1]} onChange={() => onCellChange(index, 1)}/></td>
                        <td><input type='text' className='form-control' placeholder='6.00' value={row[2]}  onChange={() => onCellChange(index, 2)}/></td>
                    </tr>
                );
            })}
        </tbody>
    </table>
  );
};

Table.propTypes = {
    data: React.PropTypes.array.isRequired
};

因此，在父组件中，您可以像<Table data={this.state.materials} onCellChange={this.onCellChange} />一样声明该组件。

它会有一个像这样的方法：

onCellChange: function(row, column) {
    //update the cell with this.setState() method
}

Answer 2

您可以通过维护表数据的状态来实现这一点。我在这里粗略地介绍了如何做到这一点：http://codepen.io/PiotrBerebecki/pen/QKrqPO

看一下显示状态更新的控制台输出。

class Table extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      materials: props.data
    };
  }

  handleChange(index, dataType, value) {
    const newState = this.state.materials.map((item, i) => {
      if (i == index) {
        return {...item, [dataType]: value};
      }
      return item;
    });

    this.setState({
       materials: newState
    });
  }

  render() {
    console.clear();
    console.log(JSON.stringify(this.state.materials));
    return (
        <table className="table table-bordered">
            <thead>
                <tr>
                    <th>Qty</th>
                    <th>Description</th>
                    <th>Price (£)</th>
                </tr>
            </thead>
            <tbody>
                {this.state.materials.map((row, index) => {
                    return (
                        <tr>
                            <td>
                              <input onChange={(e) => this.handleChange(index, 'qty', e.target.value)} 
                                     type='number' 
                                     className='form-control' 
                                     step='1' min="1"
                                     value={this.state.materials[index].qty}/>
                            </td>
                            <td>
                              <input onChange={(e) => this.handleChange(index, 'desc', e.target.value)} 
                                     type='text' 
                                     className='form-control'
                                     value={this.state.materials[index].desc}/>
                            </td>
                            <td>
                              <input onChange={(e) => this.handleChange(index, 'price', e.target.value)} 
                                     type='text'
                                     className='form-control'  
                                     placeholder='6.00'
                                     value={this.state.materials[index].price}/>
                            </td>
                        </tr>
                    );
                })}
            </tbody>
        </table>
    );
  }
}


const materials = [
  { qty: '', desc: '', price: '' },
  { qty: '', desc: '', price: '' },
  { qty: '', desc: '', price: '' },
  { qty: '', desc: '', price: '' },
  { qty: '', desc: '', price: '' },
  { qty: '', desc: '', price: '' },
  { qty: '', desc: '', price: '' },
  { qty: '', desc: '', price: '' }
]


ReactDOM.render(<Table data={materials} />, document.getElementById('app'));

Answer 3

您需要更新状态onChange：

  getInitialState: function() {
    return {value: 'Hello!'};
  },
  handleChange: function(event) {
    this.setState({value: event.target.value});
  },
  render: function() {
    return (
      <input
        type="text"
        value={this.state.value}
        onChange={this.handleChange}
      />
    );
  }