У меня есть компонент React, который имеет 3 переключателя. Наряду с переключателями у меня есть кнопка редактирования, которая открывает отдельный компонент при нажатии этой конкретной кнопки редактирования внутри переключателя. Но последний переключатель не будет иметь кнопка редактирования внутри переключателя. Итак, чтобы отобразить компонент редактирования при нажатии кнопки редактирования, я добавил значение состояния внутри моего компонента как:

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 /> открывается для все переключатели, даже для последнего переключателя, у которого нет кнопки редактирования. Итак, как установить индивидуальное состояние для каждой кнопки редактирования и визуализировать новый компонент только для этой соответствующей кнопки?

1
pranami 8 Окт 2018 в 13:10

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, которое сохраняет каждый индекс с истинным / ложным соответственно для конкретного элемента.

Надеюсь, это поможет решить ваш вопрос. Демонстрация кода

1
Jayavel 8 Окт 2018 в 12:23

Вы должны попробовать это:

{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 });
}
2
Howard 8 Окт 2018 в 10:19