在反应中我只想选择一个用户我的代码正在选择每个用户

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 更新为柯里化箭头函数。箭头函数将类组件的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
    },
  }));
}

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