Question

考虑这个例子：

const items = data.get('$$items');

const row = items.map((item) =>
  <tr key={item.get('id')} onClick={this.handleClick}>
    <td>{item.get('id')}</td>
    <td>{item.get('value1')}</td>
    <td>
      {  
        this.props.editing ? 
        <input value={item.get('value2')}> :
        <span>item.get('value2')</span>
      }
    </td>
    <td>{item.get('value3')}</td>
    <td>{item.get('value5')}</td>
    <td>{item.get('value5')}</td>
  </tr>
);

return (
  <section>
    <table>
      <thead>
       ...
      </thead>
      <tbody>
        { row }
      </tbody>
    </table>
  </section>

React是否提供了一种方便（不与DOM交互）的方法，在单个对象中收集每个td的值？甚至迭代每个tr，将数据处理成对象。我的意思是拥有一个Backbone模型，而不是实际拥有一个。

感谢您的关注。

Answer 1

有两种方法可以解决这个问题。

onChange事件处理程序。

在输入字段中，包括;

_.forEach

然后在组件的其他位置添加handleChange函数：

<input value={item.get('value2')} onChange={this.handleChange}>

使用组件的状态来维护＆＃34; item＆＃34;的当前值。

使用Refs，并在请求时动态提取数据。

如果您不想将信息存储在您所在的州，您可以改为输入：

handleChange: function(event) {
    this.setState({value2: event.target.value});
}

执行此操作后，您将能够通过组件的任何功能访问此输入字段;

<input value={item.get('value2')} ref="value2_input">

从JSX元素中提取数据

1 个答案: