Question

如何根据另一个字段的输入值更改一个字段的初始状态值？

这是我的代码：

import React from "react";

export class someComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      grade: "",
      tuition: changeStateHere
    };
  }

  render() {
    <div>
      <form onSubmit={this.someFunction.bind(this)}>
        <select name="grade" onChange={this.onChange} value={this.state.grade}>
          <option value="">Class</option>
          <option value="Grade One">Grade One</option>
          <option value="Grade Two">Grade Two</option>
          <option value="Grade Three">Grade Three</option>
          <option value="Grade Four">Grade Four</option>
          <option value="Grade Five">Grade Five</option>
          <option value="Grade Six">Grade Six</option>
        </select>
        <input
          type="text"
          name="tuition"
          placeholder="Tuition"
          value={this.state.tuition}
          onChange={this.onChange}
        />
      </form>
    </div>;
  }
}

我想基于tuition选择字段上的输入选项为grade设置动态初始状态值。

例如，如果用户选择Grade One，则tuition的值应为15000；如果Grade Two，则值应为'20000';等

是否有任何变通办法可以动态更改初始状态值？

Answer 1

constructor内的所有内容都在render之前运行。您将无法基于render方法内部的内容为状态设置不同的初始值。

也远离render方法中的绑定函数。最好使用类方法someFunction = () => {}，然后将其附加为onSubmit={this.someFunction}

每次组件重新渲染someFunction的另一个实例时，最终将导致浏览器中的性能问题。

Answer 2

您需要处理成绩选择并评估select元素的event.target.value。基于此，您可以使用切换到this.setState的Tuition以及是否禁用输入字段的功能。您应该使用defaultValue而不是value，以便在用户选择并选择时将输入设置为this.state.tuition

import React from "react";

export class someComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      grade: "",
      gradeSelected: false,
      tuition: 0,
    };
  }

  handleGradeSelect = event => {
    let newState = Object.assign({}, this.state) // duplicate state so you can mutate this copy
    switch(event.target.value){ // evaluate the value of the select option
      case 'Grade One':
        newState.tuition = 15000
        case 'Grade Two':
        newState.tuition = 20000
        // You get the picture
       default:
        newState.tuition = 0 // needs to have a default if no option
    }
    newState.gradeSelected = true
    this.setState(newState)
  }

  render() {
    <div>
      <form onSubmit={this.someFunction.bind(this)}>
        <select name="grade" onChange={event => this.handleChange(event)}>
          <option disabled>Class</option>
          <option value="Grade One">Grade One</option>
          <option value="Grade Two">Grade Two</option>
          <option value="Grade Three">Grade Three</option>
          <option value="Grade Four">Grade Four</option>
          <option value="Grade Five">Grade Five</option>
          <option value="Grade Six">Grade Six</option>
        </select>
        <input
          type="text"
          name="tuition"
          placeholder="Tuition"
          value={this.state.tuition}
          onChange={this.onChange}
          disabled={!this.state.gradeSelected}
        />
      </form>
    </div>;
  }
}

根据另一个字段值反应更改初始状态

2 个答案: