如何解决作为反应,我只想选择一个用户我的代码正在选择每个用户
当我单击“添加好友”按钮时,我面临的问题是每个按钮都更改为请求我如何将其特别设置为仅我单击的一个用户我尝试了几件事但它不起作用它正在选择所有其他用户。我使用了 handleproductselect 函数,但它不起作用我给了他们个人 ID 仍然不起作用
class SearchModal extends Component {
constructor(props){
super(props);
this.state = {
Input:"Add Friend",backgroundColor: 'white',active_id: null,}
}
async handleProductSelect(elementid){
const id = elementid;
const { backgroundColor } = this.state;
let newBackgroundColour = backgroundColor === 'white' ? 'yellow' : 'white';
this.setState({
Input : "Requested",backgroundColor: newBackgroundColour,active_id: id
})
console.log(id)
}
render() {
const {currentUser} = this.props;
return (
<div>
<Modal show={this.state.show} onHide={this.handleClose}
>
<Modal.Header closeButton>
<Modal.Title>
<input
type="text"
placeholder="Search.."
value={search}
onChange={this.onTextboxChangeSearch}
></input>
</Modal.Title>
</Modal.Header>
<Modal.Body>
<h3>Users</h3>
<div>
<ul className="collection">
{userdetails.map((element) => {
if(currentUser.user.username !== element.username){
return(
<div key={element._id}>
<li>{element.username}{' '}<input
type="button"
id={element._id}
onClick={this.handleProductSelect.bind(this,element._id )}
value={this.state.Input}
style = {{backgroundColor: ( element._id === this.state.active_id ? 'yellow' : this.state.backgroundColor)}}></input></li>
</div>
);
}else{
return(
<div key={element._id}>
<li>{element.username}</li>
</div>
);
}
})}
</ul>
</div>
</Modal.Body>
</Modal>
</div>
)
}
}
解决方法
问题
您已经正确地使用 state 来存储“active id”,但是您只使用了一个 state 来表示按钮的值。
<input
type="button"
id={element._id}
onClick={this.handleProductSelect.bind(this,element._id)}
value={this.state.Input} // <-- same single state for all buttons!
style = {{
backgroundColor: (element._id === this.state.active_id ? 'yellow' : this.state.backgroundColor)
}}
/>
解决方案
由于我认为目的是保留已“激活”的按钮,即您希望保留“请求”标签,因此您应该添加一些状态来存储所有请求的活动 ID。也不需要在按钮标签状态下存储静态内容,与背景颜色相同,都是基于state.active_id
值的派生数据。
this.state = {
active_id: null,requestedIds: {},}
更新 handleProductSelect
为柯里化箭头函数。箭头函数会将类组件的 this
绑定到回调。柯里化函数允许你不需要匿名回调函数来附加处理程序
handleProductSelect = id => () => {
this.setState(prevState => ({
active_id: prevState.active_id === id ? null : id,// toggle active id
requestedIds: {
...prevState.requestedIds,[id]: id,// add requested id
},}));
}
更新 Input
以检查 requestedIds
是否具有当前元素 _id
的键并有条件地呈现按钮标签。同样,检查背景颜色的活动 id。
<input
type="button"
id={element._id}
onClick={this.handleProductSelect(element._id)}
value={this.state.requestedIds[element._id] ? 'Requested' : 'Add Friend'}
style = {{
backgroundColor: (element._id === this.state.active_id ? 'yellow' : 'white')
}}
/>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。