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

原文 标签 javascript reactjs

我正在使用 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我的问题。

最佳答案

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

enter image description here

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

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

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

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


https://codesandbox.io/s/ll5p30nx5q

关于javascript - React - 根据 react-select selectedOption 渲染某些 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54411482/

相关文章:

css - 单独设置 Bootstrap 选项卡的样式

javascript - 未捕获的类型错误 : Cannot read property 'map' of undefined with React

javascript - URL 查询字符串中的特殊字符

javascript - 使用 jQTouch javascript iphone/ipad 的简单滑动图库

javascript - 两个Javascript日期变量

javascript - 如何缩小html元素以适合固定大小的div?

javascript - 使用文件名结尾将所有 reducer、操作导入 Redux。即 'TodoList_Reducers.js'

javascript - 如何使用 jquery 或 javascript 从 telerik radcombobox 获取选定的 VALUE? val() 不工作

javascript - 处理字符串并将其返回为html

javascript - 使用变量访问 Prop