React-Select：在React-Select中获取默认值

时间：2018-07-11 13:16:26

标签： javascript reactjs

我遇到 React-Select 的一个问题。我从调用API中获得了价值。但却无法通过调用API来获得价值。

import React from "react";
import Select from "react-select";

class SelectValue extends React.Component {
  state = {
    selectedValue: { label: "Select Value", value: this.props.getSelectedValue }
  };

  renderSelectOptions = refundOptions => {
    return <span>{refundOptions.label}</span>;
  };

  onSelectChange = selectedRefund => {
    this.setState({
      selectedValue
    });
  };

  render() {
    return (
      <div>
        <Select
          name="select1"
          placeholder="Select"
          value={this.state.selectedValue.value}
          onChange={this.onSelectChange}
          clearable={false}
          searchable={false}
          optionRenderer={this.renderSelectOptions}
          options={[
            { value: 1, label: "Value 1" },
            { value: 2, label: "Value 2" },
            { value: 3, label: "Value 3" }
          ]}
        />
      </div>
    );
  }
}

我在this.props.getSelectedValue中得到了 Value1 。

我在哪里缺少？

任何帮助都会很棒。

谢谢。

3 个答案:

答案 0 :(得分：0)

如果要通过道具设置初始状态，则必须在带有道具的构造函数中设置它们

如此

constructor(props){
    super(props)

      this.state = {
        selectedValue: { label: "Select Value", value:props.getSelectedValue }
      };
}

答案 1 :(得分：0)

您以这种方式尝试凸轮吗？ 

constructor(props){
     super(props);
      this.state = {
        selectedValue: false,
      }
  }

    componentDidMount = () => {
      this.setState({selectedValue: this.props.getSelectedValue });
    }

    _changeValue = selectedValue => {
        if (selectedValue.value !== null) {
          this.setState({ selectedValue: selectedValue.value });
        }
      }

    render(){
      const { selectedValue } = this.state;
      let values = [{ value: true, label: 'first' }, { value: false, label: 'second' }];

      return(
        <div>
              <Select
                 name="selectedValue"
                 value={selectedValue}
                 onChange={this._changeValue}
                 options={values}
              />
        </div>
      )
    }

答案 2 :(得分：0)

  1. 仅当返回API中的值时，您才可以选择安装选择组件。 

class SelectComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: props.value
    }
  }
  handleChange() {
  }
  render() {
    return (
      <Select
        name="form-field-name"
        value={this.state.value}
        onChange={this.handleChange}
        options={[
          { value: 'one', label: 'One' },
          { value: 'two', label: 'Two' },
        ]}
      />
    );
  }
}


class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: null
    }
  }
  componentDidMount() {
    this.getDataFromAPI().then(data=>{
      this.setState({
        value: data
      });
    });
  }
  getDataFromAPI() {
    return new Promise((resolve, reject)=>{
      setTimeout(()=>resolve('one'), 1000);
    });
  }
  render() {
    return (
      <React.Fragment>
        {
          this.state.value &&
            <SelectComponent value={this.state.value} />
        }
        
      </React.Fragment>
    );
  }
}
ReactDOM.render(<App />, document.getElementById("root"));
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.2/prop-types.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/classnames/2.2.5/index.js"></script>
<script src="https://unpkg.com/react-input-autosize@2.0.0/dist/react-input-autosize.js"></script>
<script src="https://unpkg.com/react-select@1.2.1/dist/react-select.js"></script>

<link rel="stylesheet" href="https://unpkg.com/react-select@1.2.1/dist/react-select.css">
<div id="root"></div>

  1. 您可以选择将状态保留在父组件中，并为子组件重置状态，而不是在那里设置状态。 

class SelectComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <Select
        name="form-field-name"
        value={this.props.value}
        onChange={this.props.handleChange}
        options={[
          { value: 'one', label: 'One' },
          { value: 'two', label: 'Two' },
        ]}
      />
    );
  }
}


class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: null
    }
  }
  componentDidMount() {
    this.getDataFromAPI().then(data=>{
      this.setState({
        value: data
      });
    });
  }
  getDataFromAPI() {
    return new Promise((resolve, reject)=>{
      setTimeout(()=>resolve('one'), 1000);
    });
  }
  render() {
    return (
      <React.Fragment>
        <SelectComponent value={this.state.value} handleChange={this.handleChange} />
      </React.Fragment>
    );
  }
}
ReactDOM.render(<App />, document.getElementById("root"));
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.2/prop-types.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/classnames/2.2.5/index.js"></script>
<script src="https://unpkg.com/react-input-autosize@2.0.0/dist/react-input-autosize.js"></script>
<script src="https://unpkg.com/react-select@1.2.1/dist/react-select.js"></script>

<link rel="stylesheet" href="https://unpkg.com/react-select@1.2.1/dist/react-select.css">
<div id="root"></div>

  1. 您还可以使用getDerivedStateFromProps将状态更改为更改后的道具。

class SelectComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: null
    }
  }
  static getDerivedStateFromProps(props, state) {
    if(props.value!==state.value) {
      return {
        value: props.value
      }
    }
    return null;
  }
  handleChange() {
  }
  render() {
    return (
      <Select
        name="form-field-name"
        value={this.state.value}
        onChange={this.handleChange}
        options={[
          { value: 'one', label: 'One' },
          { value: 'two', label: 'Two' },
        ]}
      />
    );
  }
}


class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: null
    }
  }
  componentDidMount() {
    this.getDataFromAPI().then(data=>{
      this.setState({
        value: data
      });
    });
  }
  getDataFromAPI() {
    return new Promise((resolve, reject)=>{
      setTimeout(()=>resolve('one'), 1000);
    });
  }
  render() {
    return (
      <React.Fragment>
        <SelectComponent value={this.state.value} />
      </React.Fragment>
    );
  }
}
ReactDOM.render(<App />, document.getElementById("root"));
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.2/prop-types.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/classnames/2.2.5/index.js"></script>
<script src="https://unpkg.com/react-input-autosize@2.0.0/dist/react-input-autosize.js"></script>
<script src="https://unpkg.com/react-select@1.2.1/dist/react-select.js"></script>

<link rel="stylesheet" href="https://unpkg.com/react-select@1.2.1/dist/react-select.css">
<div id="root"></div>

相关问题
最新问题