javascript - React - 根据 react-select selectedOption 渲染某些 div

Question

我正在使用 react-select 呈现两种类型的“工作”选项。从下拉列表中，用户可以选择任一选项。根据选择的选项，它们应该呈现包含更多输入值的不同 div。输入值取决于 selectedOption .我有两个带有渲染方法的类组件，它们应该显示对应于 jobType 的不同输入。

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      selectedOption: null
    };

    this.onChange = this.onChange.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

  onChange = e => {
    this.set({ [e.target.name]: e.target.value });
    console.log([e.target.value]);
  };

  handleChange = selectedOption => {
    this.setState({ selectedOption });
    console.log("Option selected: ", selectedOption);
  };

  render() {
    const { selectedOption } = this.state;
    return (
      <div>
        <fieldset>
          <legend>Parameters</legend>
          <label htmlFor="jobType" style={{ display: "block" }}>
            jobType:
          </label>
          <div>
            <Select
              value={selectedOption}
              onChange={this.handleChange}
              options={options}
              placeholder="Select a jobType..."
              isSearchable={options}
            />
          </div>
        </fieldset>
        <div>
          {selectedOption === "Batch" ? (
            <BatchParams />
          ) : selectedOption === "Streaming" ? (
            <StreamingParams />
          ) : null}
        </div>
      </div>
    );
  }
}

因此，假设 Streaming从下拉列表中选择选项，应呈现以下类组件:

class StreamingParams extends React.Component {
      constructor(props) {
        super(props);

        this.state = {
          maxHits: 1
        };
        this.handleMaxHitsChange = this.handleMaxHitsChange.bind(this);
      }

      handleMaxHitsChange = e => {
        this.set({ [e.target.name]: e.target.valu });
      };
      render() {
        return (
          <div>
            <label>maxHits:</label>
            <input
              type="number"
              name="maxHits"
              onChange={this.handleMaxHitsChange}
              placeholder="1"
              min="1"
              step="1"
              required
            />
          </div>
        );
      }
    }

我不能完全得到额外的输入框来呈现，不确定我是否在这里采取了正确的方法。我已经包含了 codesandbox我的问题。

Answer 1

所以它看起来像 this.state.selectedOption 中设置的值是一个带有 value 的对象和 label field 。



所以你需要关闭这些。而不是这样做

          {selectedOption === "Batch" ? (
            <BatchParams />
          ) : selectedOption === "Streaming" ? (
            <StreamingParams />
          ) : null}

做这个

          {selectedOption && selectedOption.value === "batch" ? (
            <BatchParams />
          ) : selectedOption && selectedOption.value === "streaming" ? (
            <StreamingParams />

您应该选择 value而不是 label在本地化或翻译的情况下。

叉
https://codesandbox.io/s/ll5p30nx5q