首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >更新组件时响应输入元素不更新

更新组件时响应输入元素不更新
EN

Stack Overflow用户
提问于 2017-02-23 21:40:12
回答 2查看 2.1K关注 0票数 0

我正在尝试制作一个的反应版本。

您可以看到我到目前为止在这个科迪芬上的情况。

这里的问题是,当您键入一个文本字段(在“可疑玩家”列下),然后单击相邻的名称(在“角色”列下)以删除该行时,文本将保留在输入中,然后与另一个名称相邻。

预期的行为是单击名称移除行,两个元素(名称和文本输入)都将消失。

表中的所有项都存储在一个名为checklist的数组中,处于RoleList类的状态。

表中每个列表项的组件如下:

代码语言:javascript
复制
class RoleCheckpoint extends React.Component {
    constructor() {
        super();
        this.state = {
            text: ""
        };
    }

    deleteThis() {
        this.props.removeRole(this.props.role.id);
    }

    onChange(e) {
        this.setState({
            text: e.target.value
        });
    }

    render() {
        console.log(this.props);

        return (
            <tr>
                <td className="vertAlign remove noselect" onClick={this.deleteThis.bind(this)}>
                    {this.props.role.el}
                </td>
                <td>
                    <input type="text" className="form-control" spellCheck="false" onChange={this.onChange.bind(this)} value={this.state.text} />
                </td>
            </tr>
        );
    }
}

当您单击名称时,它调用组件deleteThis函数,该函数反过来调用RoleListremoveRole函数(该函数遍历列表项数组,并从components状态中删除具有匹配ID的项),该函数正作为支柱传递给RoleCheckpoint

我尝试在this.forceUpdate()函数中使用deleteThis,如您所见,我尝试将输入字段的value绑定到组件状态(称为text),但是在从DOM中删除组件时,输入仍然没有更新。

任何帮助都很感激,如果你需要更多的澄清,我很乐意提供它。

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-02-23 22:01:52

"key“是创建元素列表时需要包含的特殊字符串属性。

代码语言:javascript
复制
<RoleCheckpoint role={role} key={role.id} removeRole={this.removeRole.bind(this)} />
票数 2
EN

Stack Overflow用户

发布于 2017-02-23 22:03:50

当您有一个组件列表并且没有正确设置对象的键时,这种行为是典型的。它必须是识别对象的东西。您可能可以使用name字段:

代码语言:javascript
复制
<RoleCheckpoint key={role.name} .../>

请参阅https://facebook.github.io/react/docs/lists-and-keys.html

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/42426705

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档