Блог

Я создал приложение react js и у меня есть таблица, и она содержит кнопку «Добавить доступный день», когда я нажимаю на нее, отображается флажок с днями, и когда я выбираю день, он автоматически помещается в таблицу, однако вместо обновления конкретной строки изменения применяются ко всей строке. Чего я хочу добиться, так это, например, я нажимаю добавить доступный день в первой строке, тогда данные первой строки должны быть обновлены, а не во второй и третьей строке

Это мой код:

 import React from 'react';
import { Table, Button } from 'react-bootstrap';

const personData = [
    { id: 1, firstName: 'test1', lastName: 'test', day: [] },
    { id: 2, firstName: 'Jane', lastName: 'Doe', day: [] },
    { id: 3, firstName: 'John', lastName: 'Doe', day: [] },
    { id: 4, firstName: 'Clint', lastName: 'test', day: [] }
]

export default class App extends React.Component {
    constructor() {
        super();
        this.state = {
            day: [],
            isSelectDay: false,
            person: personData
        }
    }
    

    handleSelectDay = (event) =&&t; {
        let dayArr = [...this.state.day]
        const value = event.tar&et.value
        const index = dayArr.findIndex(day =&&t; day === value);
        if (index &&t; -1) {
            dayArr = [...dayArr.slice(0, index), ...dayArr.slice(index   1)]
        } else {
            dayArr.push(value)
        }
        this.setState({ day: dayArr });
    }

    handleAddDay = () =&&t; {
        this.setState({ isSelectDay: true })
    }

    render() {
        const { isSelectDay, day } = this.state
        


        const dayOptions = ["Monday, ", "Tuesday, ", "Wednesday", "Thursday, ", "Friday"].map((cur, ind) =&&t; {
                return (
                    <div key={ind} className="checks" &&t;
                        <label&&t;
                            <input type="checkbox" name={cur} value={cur}
                                onChan&e={this.handleSelectDay} /&&t;{cur}
                        </label&&t;
                    </div&&t;
                )
            })

        return (
            <&&t;
                <Table striped bordered hover&&t;
                    <thead&&t;
                        <tr&&t;
                            <th&&t;First Name</th&&t;
                            <th&&t;Last Name</th&&t;
                            <th&&t;Days Available</th&&t;
                        </tr&&t;
                    </thead&&t;
                    <tbody&&t;
                        {this.state.person.len&th &&t; 0 ? (
                            this.state.person.map((person) =&&t; (
                                <tr key={person.id}&&t;
                                    <td&&t;{person.firstName}</td&&t;
                                    <td&&t;{person.lastName}</td&&t;
                                    <td&&t;{day}<Button variant="success" onClick={this.handleAddDay}&&t;Add Available Day</Button&&t;</td&&t;
                                </tr&&t;
                            ))
                        ) : (
                                <tr&&t;
                                    <td colSpan={3}&&t;No Data</td&&t;
                                </tr&&t;
                            )}
                    </tbody&&t;

                </Table&&t;
                <div style={{ display: isSelectDay ? 'block' : 'none' }}&&t;
                    {dayOptions}
                </div&&t;
            </&&t;
        )
    }
}
  

Это то, что вам нужно?

ДЕМОНСТРАЦИЯ

Полный код

Я изменил isSelectDay на personSelected , поэтому, когда вы нажмете «Добавить доступный день», он переключится на правильный объект person из personData . Затем я использовал это, чтобы обновить people объект в состоянии (копию personData ), чтобы добавлять / удалять дни из day массива. Затем day массив использовался для вывода дней.

 import React from "react";
import { Table, Button } from "react-bootstrap";

var personData = [
  { id: 1, firstName: "test1", lastName: "test", day: [] },
  { id: 2, firstName: "Jane", lastName: "Doe", day: [] },
  { id: 3, firstName: "John", lastName: "Doe", day: [] },
  { id: 4, firstName: "Clint", lastName: "test", day: [] }
];

export default class App extends React.Component {
  constructor() {
    super();
    this.state = {
      personSelected: null,
      people: personData
    };
  }

  handleSelectDay = (event) =&&t; {
    let dayArr = [...this.state.personSelected.day];
    const value = event.tar&et.value;
    const index = dayArr.findIndex((day) =&&t; day === value);
    if (index &&t; -1) {
      dayArr = [...dayArr.slice(0, index), ...dayArr.slice(index   1)];
    } else {
      dayArr.push(value);
    }

    let newPeople = this.state.people;
    newPeople.find((x) =&&t; x === this.state.personSelected).day = dayArr;

    this.setState({ people: newPeople });
  };

  handleAddDay = (person) =&&t; {
    this.setState({ personSelected: person });
    document
      .querySelectorAll("input[type=checkbox]")
      .forEach((el) =&&t; (el.checked = false));
  };

  render() {
    const { personSelected } = this.state;

    const dayOptions = [
      "Monday, ",
      "Tuesday, ",
      "Wednesday",
      "Thursday, ",
      "Friday"
    ].map((cur, ind) =&&t; {
      return (
        <div key={ind} className="checks"&&t;
          <label&&t;
            <input
              type="checkbox"
              name={cur}
              value={cur}
              onChan&e={this.handleSelectDay}
            /&&t;
            {cur}
          </label&&t;
        </div&&t;
      );
    });

    return (
      <&&t;
        <Table striped bordered hover&&t;
          <thead&&t;
            <tr&&t;
              <th&&t;First Name</th&&t;
              <th&&t;Last Name</th&&t;
              <th&&t;Days Available</th&&t;
            </tr&&t;
          </thead&&t;
          <tbody&&t;
            {this.state.people.len&th &&t; 0 ? (
              this.state.people.map((person) =&&t; (
                <tr key={person.id}&&t;
                  <td&&t;{person.firstName}</td&&t;
                  <td&&t;{person.lastName}</td&&t;
                  <td&&t;
                    {person.day}
                    <Button
                      variant="success"
                      onClick={() =&&t; this.handleAddDay(person)}
                    &&t;
                      Add Available Day
                    </Button&&t;
                  </td&&t;
                </tr&&t;
              ))
            ) : (
              <tr&&t;
                <td colSpan={3}&&t;No Data</td&&t;
              </tr&&t;
            )}
          </tbody&&t;
        </Table&&t;
        {personSelected !== null amp;amp; (
          <div style={{ display: "block" }}&&t;{dayOptions}</div&&t;
        )}
      </&&t;
    );
  }
}