Реагировать: динамически обновлять значения полей из отдельных входных состояний

Question

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

Пример; Символ имеет размер «Средний», когда он выбирается из поля выбора, поля «пробел», «досягаемость», досягаемость »автоматически изменяются на указанные c значения.

Проблема I Я не могу найти правильный способ доступа к состояниям этих выбранных входов. Logi c - это вызов метода handleUpdate (size) и доступ к состояниям, которые должны быть обновлены с соответствующими значениями. , но я не нашел способа получить доступ к их состояниям, чтобы изменить их значения без прямого ввода пользователя.

class SizeSpace extends React.Component<any,any>
{
  constructor(props: any) {
    super(props);
    this.state = {
      //POPULATE FROM XML PLAYER FILE
    };
    this.handleChange = this.handleChange.bind(this);
  }

handleChange (evt) {
    // check it out: we get the evt.target.name (which will be either "email" or "password")
    // and use it to target the key on our `state` object with the same name, using bracket syntax

    console.log(evt);
    console.log(evt.target);
    console.log(evt.target.name);

    this.setState({ [evt.target.name]: evt.target.value });


  }

handleUpdate(size)
  {
    switch (size) {
      case value: "Fine"
        //Update space
        //Update reachTall
        //Update reachLength
        break;

      default:
        break;
    }
  }



render() {
    return (
      <form>

        <label>
          Size:
        </label>
        <select value={this.state.value} onChange={this.handleChange}>
          <option value="Fine">Fine</option>
          <option value="Diminutive">Diminutive</option>
          <option value="Tiny">Tiny</option>
          <option value="Small">Small</option>
          <option value="Medium">Medium</option>
          <option value="Large">Large</option>
          <option value="Huge">Huge</option>
          <option value="Gargantuan">Gargantuan</option>
          <option value="Colossal">Colossal</option>
        </select>

        <label>
          Space:
        </label>
        <select name="space" value={this.state.value} onChange={this.handleChange}>
          <option value=".5">.5ft</option>
          <option value="1">1ft</option>
          <option value="2.5">2.5ft</option>
          <option value="5">5ft</option>
          <option value="10">10ft</option>
          <option value="15">15ft</option>
          <option value="20">20ft</option>
          <option value="30">30ft</option>
        </select>

        <label>
          Reach: Tall
        </label>
        <select name="reachTall" value={this.state.value} onChange={this.handleChange}>
          <option value="0">0ft</option>
          <option value="5">5ft</option>
          <option value="10">10ft</option>
          <option value="15">15ft</option>
          <option value="20">20ft</option>
          <option value="30">30ft</option>
        </select>

        <label>
          Length:
        </label>
        <select name="reachLength" value={this.state.value} onChange={this.handleChange}>
          <option value="0">0ft</option>
          <option value="5">5ft</option>
          <option value="10">10ft</option>
          <option value="15">15ft</option>
          <option value="20">20ft</option>
        </select>
      </form>
    );
  }
}

export default SizeSpace;

Answer 1

Обратите внимание, что - при первом выборе атрибут name отсутствует.

Как правило, когда вы предоставляете value своему select, вам необходимо будет указать ключ, который вы установили. динамически в вашем дескрипторе. В вашем случае это name.

Как это:

<select name="space" value={this.state.space} onChange={this.handleChange}>
          <option value=".5">.5ft</option>
          <option value="1">1ft</option>
          <option value="2.5">2.5ft</option>
          <option value="5">5ft</option>
          <option value="10">10ft</option>
          <option value="15">15ft</option>
          <option value="20">20ft</option>
          <option value="30">30ft</option>
        </select>