如何在同一"row"中引用其他输入？

Question

onChange = ev => {
    // how to get all inputs in this row?
};
render = () =>
    <table className="MenuMenuOptionsWidget">
        <thead>
        <tr>
            <th className="id">ID</th>
            <th className="label">Label</th>
            <th className="order">Order</th>
            <th className="key">Key</th>
            <th className="active">Active</th>
        </tr>
        </thead>
        <tbody>
        {this.state.options.map((opt,i) => <tr key={i}>
            <td className="id">
                {opt.id ? [<input type="hidden" name={`options[${i}][id]`} defaultValue={opt.id}/>,opt.id] : '*' }
            </td>
            <td className="label">
                <input type="text" defaultValue={opt.label} name={`options[${i}][label]`} readOnly={!opt.active} onChange={this.onChange} />
            </td>
            <td className="order">
                <input type="text" className="number" defaultValue={opt.order} name={`options[${i}][order]`} readOnly={!opt.active} onChange={this.onChange}/>
            </td>
            <td className="key">
                <input type="text" defaultValue={opt.key} name={`options[${i}][key]`} readOnly={!opt.active} onChange={this.onChange}/>
            </td>
            <td className="active">
                {opt.id ? <input type="checkbox" value="1" defaultChecked={opt.active} name={`options[${i}][active]`} onChange={this.onChange} /> : <a href="#" className="cr-delete-link" onClick={ev => this.onClickDelete(ev,i)}/>}
            </td>
        </tr>)}
        </tbody>
    </table>;

我的 render(( 函数中有一个"循环"，它渲染了一堆输入。我想为每个事件添加相同的onChange事件。如果这样做，如何访问导致更改事件的行中的所有输入？

我可以通过 ev.target 访问导致更改事件的输入，但如何获取其他输入？

我可以使用jQuery：$(ev.target).closest('tr').find(...)但我正在寻找惯用的React方法。

Answer 1

您希望

使用 ref 属性。 通过向 TR 添加唯一的 ref 并调用children或为每个 TD 添加唯一的 ref，您可以在需要时获取它们。

<tr key={i} ref={`row${i}`}>

然后使用refs获取参考

this.refs.row1.children

将抓取第 1 行内的所有 TD

Answer 2

您可以将 refs 用作函数。看这里。

尝试这样的事情：https://jsbin.com/kixowo/edit?js,console,output

var Component = React.createClass({
  getInitialState() {
      return {
          options: [
              'Row 1',
              'Row 2'
          ]
      };
  },
  rows: [],
  onChange(row) {
      this.rows[row].forEach((input) => {
          // The values of all inputs in the row that changed
          console.log(input.getDOMNode().value);
      });
  },
  renderRows() {
      this.rows = [];
      return this.state.options.map((opt,i) => {
          // Store and cache a new row and store inputs in the
          // array using `refs` below.
          this.rows.push([]);
          return (<tr key={i}>
              <td>{opt}</td>
              <td>
                  <input ref={(input) => this.rows[i].push(input)} onChange={this.onChange.bind(this, i)} />
              </td>
              <td>
                  <input ref={(input) => this.rows[i].push(input)} onChange={this.onChange.bind(this, i)} />
              </td>
          </tr>);
      });
  },
  render() {
      return (
          <table>
              {this.renderRows()}
          </table>
      );
  }
});

通过这种方式，您可以构建一组动态输入，并使用行号作为参数调用 on change 事件。