Добавление значений из выпадающего списка

Question

У меня есть два компонента React.Компоненты Value содержат данные, которые передаются как компоненты Numbers.

class Values extends Component {
  constructor() {
    super();

    this.state = {
      values: [
        {
          name: "A",
          numbers: [
            {
              number: 30
            },
            {
              number: 40
            },
            {
              number: 50
            }
          ]
        },
        {
          name: "B",
          numbers: [
            {
              number: 20
            },
            {
              number: 30
            }
          ]
        }
      ]
    };
  }

  render() {
    const { values } = this.state;
    return (
      <div>
        {values.map(value => (
          <Numbers key={value.name} value={value} />
        ))}
      </div>
    );
  }
}

Компоненты Numbers отображают два выпадающих списка.Я хочу иметь возможность выбрать два значения и сохранить сумму в состоянии компонента, и, конечно, сумма должна меняться при выборе других значений.

class Numbers extends Component {
  constructor(props) {
    super(props);

    this.state = {
      sum: 0
    };
  }

  onChange = e => {};

  render() {
    const { value } = this.props;
    return (
      <div>
        <p>{value.name}</p>
        <select onChange={this.onChange}>
          {value.numbers.map(item => (
            <option value={item.number} key={item.number}>
              {item.number}
            </option>
          ))}
        </select>
      </div>
    );
  }
}

Answer 1

Что вы можете сделать, это поднять состояние и сообщить вашему компоненту Values в своем собственном состоянии, какое число выбрано каждым из ваших выборов.

class Values extends React.Component {
  constructor() {
    super();

    this.state = {
      values: [
        {
          name: "A",
          selected: 0, // The selected number for this select will be held in memory here
          numbers: [
            {
              number: 30
            },
            {
              number: 40
            },
            {
              number: 50
            }
          ]
        },
        {
          name: "B",
          selected: 0, // The selected number for this select will be held in memory here
          numbers: [
            {
              number: 20
            },
            {
              number: 30
            }
          ]
        }
      ]
    };
  }

  // Rest of your component
}

Затем вам нужно передать вашему компоненту Numbers способ изменить состояние Values; например, вы можете передать метод, который изменит состояние вашего Values компонента.

class Values extends React.Component {
 // Code...

  // This will be passed down to Number component in the render method
  selectNumber = (name, number) => {
    this.setState({
      values: this.state.values.map((value => {
        if (value.name === name) {
          return {
            ...value,
            selected: number
          }
        }

        return value;
      }))
    })
  }

  render() {
    const { values } = this.state;
    return (
      <div>
        // WE PASS IT DOWN HERE
        {values.map(value => (
          <Numbers 
            key={value.name} 
            value={value}
            onSelect={(number) => this.selectNumber(value.name, number)}
            />
        ))}
        <h1>sum: {sum}</h1>
      </div>
    );
  }
}

Наконец, в вашей функции рендеринга Values вам нужно сложить все выбранные числа каждого из ваших выборов, которые живут в вашем штате, и отобразить их.

class Values extends React.Component {
  // Code ...

  render() {
    const { values } = this.state;
    const sum = values.reduce((acc, val) => acc + val.selected, 0) // We make the sum
    return (
      <div>
        {values.map(value => (
          <Numbers 
            key={value.name} 
            value={value}
            onSelect={(number) => this.selectNumber(value.name, number)}
            />
        ))}
        <h1>sum: {sum}</h1> {/* Display the sum */}
      </div>
    );
  }
}

Вот рабочий код, который я сделал, настроив ваш код.

Answer 2

Вы можете иметь состояние типа dropdownValues, которое может быть массивом строк, и в компоненте Values должна быть функция onChange, и эта функция передается компоненту Numbers.Компонент Numbers должен передать значение и индекс в onChange в качестве аргумента.Затем в массиве родительского компонента dropdownValues может быть обновлен этот индекс компонента.Затем, когда у нас будет массив, содержащий значения, мы можем их суммировать.