Question

我正在尝试创建一个React应用，该应用专注于根据输入的统计信息和属性自动对D＆D角色进行计算和更改。

一个例子；字符的大小为“中”，从选择字段中选择字符时，“空格”，“ reachTall”，reachLength”字段将自动更改为特定值。

我遇到的问题是我无法找到访问那些选择输入的状态的正确方法。逻辑是调用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时，需要提供在handleChange中动态设置的密钥。您的情况是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>

反应：从单独的输入状态动态更新字段值

1 个答案: