如何在ReactJs中設置各個狀態以在map函數內呈現組件

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。

希望這有助於解決您的查詢。 代碼演示