时间戳

首页 > 解决方案 > 在反应中我只想选择一个用户我的代码正在选择每个用户

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

问题描述

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

标签： reactjsselectbuttoncompiler-errorsmern

解决方案

问题

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

推荐阅读