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 property。通过为tr和调用children添加唯一引用或为每个td添加唯一引用，您可以在需要时获取它们。

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

然后使用refs

抓取参考号

this.refs.row1.children

将获取row1中的所有td

Answer 2

您可以将refs用作函数。请参阅here。

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

let Store = React.createClass({
  getInitialState () {
    return {
      shoppingCartItems: []
    };
  },

  addItem (item) {
    let newItems = shoppingCartItems.push(item);
    this.setState({shoppingCartItems: newItems});
  },

  render () {
    return (
      <div className='store'>
        <ShoppingCart items={this.state.shoppingCartItems}/>
        <Products addItem={this.addItem} products={this.props.products}/>
      </div>
    )
  }
});

let Products = React.createClass({
  handleClick (product) {
    this.props.addItem(product);
  },

  render () {
    return (
      <div className='products'>
        {this.props.products.map(product => {
          return (
            <div id={product.id} className='product' key={product.id}>
              <h2>{product.name}</h2>
              <img src={product.image}/>
              // I'm pretty sure there are better solutions than using .bind here.
              <button onClick={this.handleClick.bind(this, product)}>Add to Cart</button>
            </div>
          );
        })}
      </div>
    )
  }
});

let ShoppingCart = React.createClass({
  render () {
    return (
      <div className='cart'>
        <ul className='items'>
          {this.props.items.map(item => {
            return (<li className='item' key={item.id}>{item.name}</li>);
          })}
        </ul>
      </div>
    );
  }
});

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

如何在同一“行”中引用其他输入？

2 个答案: