Reactjs 在react中，我只想选择一个用户。我的代码正在选择每个用户

当我点击“添加朋友”按钮时，我面临着一个问题，每个按钮都会更改为“请求”，我如何才能将其设置为仅一个用户？我点击了该按钮。我尝试了一些方法，但它不起作用。它正在选择其他所有用户。我使用了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>
    )
  }
}

类SearchModal扩展组件{
建造师（道具）{
超级（道具）；
此.state={
输入：“添加好友”，
背景颜色：“白色”，
活动\u id:null，
}
}
异步handleProductSelect（elementid）{
常量id=元素id；
const{backgroundColor}=this.state；
让newbackgroundcolor=backgroundColor==‘白色’？‘黄色’：‘白色’；
这个.setState（{
输入：“已请求”，
背景颜色：NewBackgroundColor，
活动用户id:id
})
控制台日志（id）
}
render（）{
const{currentUser}=this.props；
返回(
使用者

{userdetails.map（（元素）=>{
if（currentUser.user.username！==element.username）{
返回(
{element.username}{'}
);
}否则{
返回(
{element.username}
);
}
})}

)
}
}

问题 您已经正确地使用状态来存储“活动id”，但是您只使用单个状态来表示按钮的值

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

更新

handleProductSelect

作为当前箭头函数。箭头函数将类组件的

this

绑定到回调。curried函数允许您不需要匿名回调函数来附加处理程序

handleProductSelect = id => () => {
  this.setState(prevState => ({ 
    active_id: prevState.active_id === id ? null : id, // toggle active id
    requestedIds: {
      ...prevState.requestedIds,
      [id]: id, // add requested id
    },
  }));
}

更新

输入

以检查

请求的id

是否有当前元素

\u 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')
  }}
/>

hello@DrewReese我在上面的代码中遇到了一个问题，我应该做什么更改才能在friendslist和receiver中添加friendsiduser@PratikZinjurde我认为你可能需要围绕这个新问题提供更多的背景。如果你能为你想做的事情创建一个运行的代码沙盒，我不介意在有时间的时候看一看。这似乎也是一个新问题。不过，发布一个新的SO问题可能会更快，你会得到更多的关注。如果你这样做，请随时（在）我这里与它的链接。好的，谢谢，但我这样做了，它的工作现在让user=wait user.findByIdAndUpdate（id，{$push:{“friendsList”：{FriendsId:fid}}}）如果（user）{wait user.findByIdAndUpdate（fid，{$push:{“friendsList”：{FriendsId:id}}}）//我添加了这一行，现在在两个用户的好友列表中，每个人的id都被添加了res.status（200）.json（{message:“user found”，user，}）；事实上，我是在问如何连接两个用户，比如用户id是另一个我们发送请求的朋友id。这就像是一个黑客。事实上，Hello@Drewerese我需要你的帮助，当我刷新按钮重置值时，我需要你的帮助。如何使其永久性。我正在考虑使用本地存储，但我找不到该放在哪里如果friendsid=userid，则它将始终显示button@PratikZinjurde当然可以。一个常见的解决方案是使用localStorage来持久化应用程序状态。您可以使用

componentDidUpdate

将组件状态持久化到本地存储，并使用

componentDidMount

读取并初始化组件状态吃了。

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