Question

这是一个来自render（）的片段

{users.map((user)=>{
    return <tr key={user._id}>
        <td><input  onChange={this.handleChange.bind(this, user._id)}
            type="text" 
            ref="name" 
            value={user.profile.firstName} />
        </td>
    </tr>
})}

这里是处理程序：

handleChange(userId) {
    console.log(userId);
    var name = this.refs.name.value.trim();
    console.log(name);
}

处理程序将打印正确的userId但始终是用户表中的姓氏

创建可以获取map创建的表中特定输入字段值的处理程序的正确方法是什么？

我应该生成唯一的以某种方式引用？

或者这个方法有不同的方法吗？

Answer 1

onChange也会收到SyntheticEvent作为参数。如果将其添加到onChange处理程序，则可以检查目标并获取新值：

handleChange：

handleChange(userId, event) {
    console.log(userId);
    var inputElement = event.target;
    console.log(inputElement.name + ': ' + inputElement.value);
}

要在单个handleChange中处理多个输入，请在输入中添加标准name attributes并在更改处理程序中检查它们：

{users.map((user)=>{
    return <tr key={user._id}>
        <td><input onChange={this.handleChange.bind(this, user._id)}
            name="name"
            type="text"
            value={user.profile.firstName} />
        </td>
    </tr>
})}

controlled components文档中介绍了这一点。

Answer 2

创建新组件UserListRow.jsx在那里移动代码，例如：

ID  R_ID    Price
1   ID001   15700
6   ID002   15701

UserListRow.jsx渲染：

                    {users.map((user)=>{
                        return <UserListRow user={user} key={user._id}/>
                    })}

将return <tr key={user._id}> <td><input onChange={this.handleChange.bind(this, user._id)} type="text" ref="name" value={user.profile.firstName} /> </td> </tr>移至UserListRow.jsx

React - ref值inInChange in map（）生成（流星）

2 个答案: