我有一个存储,它为我提供了密码对象数组,例如:
const passwords = [{
id: 'hjgkjhkjl',
password: 'jhckjdhf',
createdAt: 'jan 3rd, 2019'
},
{
id: 'uygkjhkj',
password: 'kdjhfkjdhf',
createdAt: 'jan 3rd, 2019'
}
]
我可以在我的组件中以this.props.passwords身份访问此密码
我正在尝试将它们作为带有按钮(更新/确认)的列表填充到UI上-我使用组件级别的状态在它们之间切换
因为这是一个组件级别的状态,如果我点击一个按钮,所有的按钮都会发生变化
以下是我的代码
class Passwords extends React.Component {
constructor(props) {
super(props)
this.state = {
disabled: false
}
this.handleUpdate = this.handleUpdate.bind(this)
}
handleUpdate(element) {
// this.context.executeAction(removePassword, element.createdAt)
// this.context.executeAction(fetchPasswords)
this.setState({
disabled: !this.state.disabled,
})
}
render() {
const data = [
{
password: "passwordone",
createdAt: "Jan 2, 2019"
},
{
password: "passwordtwo",
createdAt: "Jan 2, 2019"
}
];
return (
<div>
{data.map((element) => {
return (
<div>
<input value={element.password} disabled={!this.state.disabled}/>
<span style={{marginLeft: "15px"}}> {element.createdAt} </span>
<span style={{marginLeft: "15px"}}>
<button onClick={() => this.handleUpdate(element)}>
{this.state.disabled ? "Confirm" : "Update"}
</button>
</span>
</div>
)
})}
</div>
)
}
}
ReactDOM.render(<Passwords/>, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id='root'>
</div>
需要一个更好的方法来解决这个问题
下面的Link提供了一个工作示例
id对于密码项目是唯一的-只需为单击的按钮切换预期结果更新/确认
提前感谢
发布于 2019-01-04 03:31:48
之所以会出现这个问题,是因为您为状态中的两个按钮分配了相同的值。通过切换一个按钮并更新该共享状态值,两个按钮都得到更新将是有意义的。
相反,您应该做的是将按钮向下移动到子组件中,在那里它们会跟踪自己的状态。因此,当您单击一个按钮时,它只会更改该组件的状态。
https://stackoverflow.com/questions/54028302
复制相似问题