javascript - 如何使用该行中的 onClick 获取一行中的输入数据 - ReactJS

Question

对reactjs和JavaScript来说还是新事物，所以这可能很简单，但我在网上搜索时还没有找到示例。

我想构建一个表，其中每行都有一个输入框和一个 onClick/submit，然后发送在函数中为该行输入的输入量，或者只是以某种方式访问​​该行的输入数据。这些行是根据状态中保存的数组构建的。

这是我当前所在位置的精简代码。这只是由传递 biweeklyPays 和 saveChanges 的更高级别容器调用的表。

function PayoutsTable(props) {
    var payoutRows = []
    var biweeklyPays = props.biweeklyPays
    for (let b of biweeklyPays) {
        payoutRows.push(
            <tr>
                <td>{b.user.first_name + ' ' + b.user.last_name}</td>
                <td>{b.biweeklyPay.payoutAmount}</td>
                <td><input className="form-control" type="number" id="payoutAmount" step=".01" min="0" /></td>
                <td><button className="btn btn-primary" onClick={() => props.saveChanges(b)}>Submit</button></td>
            </tr>
        )
    }
    return (
        <div>
            <table className="table table-responsive table-striped">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Payout Amount</th>
                        <th></th>
                        <th></th>
                    </tr>
                 </thead>
                 <tbody>
                     {payoutRows}
                 </tbody>
             </table>
        </div>
    )
}

Answer 1

您创建的是纯粹的无状态组件，根据定义，它不能用于有状态的“解决方案”，例如编辑输入或其他表单。

您应该将组件转换为带有 state 的类并在输入值更改时更新状态。

步骤:

1. 转换为类 ( https://facebook.github.io/react/docs/state-and-lifecycle.html#converting-a-function-to-a-class )
2. 渲染输入中的实际值 -> <input ... value={this.state.values[i]} .../>
3. 注册输入更改 -> this.updateInput(i, e) }`
4. 按钮应将本地状态发送给父级 -> <button ... onClick={() => this.props.saveChanges(b, this.state.values[i])

( i 是迭代的索引，您可以将 for 更改为例如 _.forEach(biweeklyPays, (b, i) => { .... } )

我假设您将输入值数组保存在 state 中，要实现此目的，您应该像这样初始化您的组件:

getInitialState: function() {
    return { values: [] };
}

onUpdateRowValue(i, e)提到的应该更新i -状态元素:

onUpdateRowValue: function(i, e) {
    var values = this.values.slice(0);
    values[i] = e.target.value
    this.setState({values: values});
}