Question

我有一个带有3个单选按钮的react组件，除了单选按钮外，还有一个编辑按钮，当单击单选按钮中的特定编辑按钮时，它会打开一个单独的组件，但是最后一个单选按钮会单选按钮内没有编辑按钮。因此，要在单击编辑按钮时渲染编辑组件，我在组件内部添加了状态值：

this.state = {
      isDrawerOpen: false,
      options: ['abc.sce.com', 'def.sce.com', 'No email alerts'],
}

因此，我正在使用地图功能渲染单选按钮，并且在单选按钮下方，应通过单击单选按钮内部的编辑按钮来调用新组件。

所以，我的代码如下：

{this.state.options.map((email, i, arr) => {
          return (
           <RadioButtonComponent />   
                {!(arr[i].includes('No email alerts')) ? (
                  <button
                      id='editEmail'
                      onClick={this.handleEmailToggle} /> ) :
                  null}

               {this.state.isDrawerOpen ?  <OpenComponentOnEditClickOfRadiButton /> : null}

          );

在单击编辑按钮时调用的我的handleEmailToggle()函数如下：

  handleEmailToggle() {
    this.setState({ isDrawerOpen: true });
  }

因此，当单击编辑按钮时，组件<OpenComponentOnEditClickOfRadiButton />应该打开。现在发生的是，当我单击单选按钮的任何一个编辑按钮时，组件<OpenComponentOnEditClickOfRadiButton />正在打开所有单选按钮，甚至是最后一个没有编辑按钮的单选按钮。那么，如何为每个编辑按钮设置单独的状态并仅为相应的按钮渲染新组件？

Answer 1

您应该尝试以下操作：

{this.state.options.map((email, i, arr) => {
      return (
       <RadioButtonComponent />   
            {!(arr[i].includes('No email alerts')) ? (
              <button
                  id='editEmail'
                  onClick={e => this.handleEmailToggle(e, email)} /> ) :
              null}

           {this.state.isDrawerOpen ?  <OpenComponentOnEditClickOfRadiButton /> : null}

      );

并将您的handleEmailToggle更新为：

handleEmailToggle(e, email) {
  // use email passed from map
  this.setState({ isDrawerOpen: true });
}

Answer 2

很久以前，我遇到了与您相同的问题。我做了以下的技巧：

const EditComp = () => <button type='button'>Edit</button>

class App extends Component {
    state = {
      isDrawerOpen: [],
      radioButton : [
        { id: "radio1", name: "male", edit: false,value: "male" },
        { id: "radio2", name: "female", edit: false, value: "female" }
      ],
      val: []
    };


  handleEmailToggle(event, currentIndex) {
    let showEdit = this.state.isDrawerOpen.map((val, index) => {
        return (val = false);
    }); 
    let isDrawerOpen = showEdit.slice();
    isDrawerOpen[currentIndex] = true;
    this.setState({ isDrawerOpen });
  }

  render() {
    return (
      this.state.radioButton.map((ele,index) => (
        <>
            <button key={ele.id} 
              onClick={e => this.handleEmailToggle(e, index)}>
            {ele.name} </button><br/>
            {this.state.isDrawerOpen[index] ? <EditComp /> : null}
            <br/>

        </>
      ))
    );
  }
}

我要做的是，每个按钮上的单击分别显示一个编辑按钮。每次单击时，当前元素的索引将传递给函数，并且有一个isDrawerOpen状态，该状态将每个索引分别存储在特定元素上的true / false。 >

希望这有助于解决您的查询。 Code demo

如何在ReactJs中设置单个状态以渲染map函数内的组件

2 个答案: