在反应中我只想 select 一个用户我的代码是 selecting 每个用户

Question

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

Answer 1

问题

您已正确使用状态来存储“活动 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)
  }}
/>

解决方案

由于我认为其目的是保留已“激活”的按钮，即您希望保留“已请求”标签，因此您应该添加一些状态来存储所有请求的活动 ID。按钮标签的状态也不需要存储静态内容，和背景颜色一样，这都是基于state.active_id值的派生数据。

this.state = {
  active_id: null,
  requestedIds: {},
}

将 handleProductSelect 更新为柯里化箭头函数。箭头函数会将 class 组件的 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')
  }}
/>

在反应中我只想 select 一个用户我的代码是 selecting 每个用户

in react i want to select only one user my code is selecting every user

select

compiler-errors

button

reactjs

mern

问题

解决方案