Javascript 如何在一行中使用onClick获取输入数据-reactjs

对reactjs和JavaScript来说还是新鲜事物，所以这可能很简单，但我还没有找到一个在线搜索的例子

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

这是我目前所在位置的精简代码。这是唯一一个由更高级别的容器调用的表，该容器传递两周的日期和保存更改

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>
    )
}

---

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

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

步骤：

转为班级 在输入中呈现实际值-> 注册输入->this.updateInput，e}中的更改` 按钮应将本地状态发送到父级->this.props.saveChangesb，this.state.values[i] i是迭代的索引，您可以将for更改为例如uu.forEachbiweeklyPays，b，i=>{…}

我假设您将输入值数组保持在状态，要实现这一点，您应该如下初始化组件：

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

提到的onUpdateRowValuei，e应仅更新状态的第i个元素：

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