React Select - 支持

Question

我正在尝试使用React Select在ReactJS中设置我的brandSelect道具的状态但是我对如何做到这一点很困惑？

这是我目前的代码：

class VehicleSelect extends React.Component {

  constructor(props) {
    super(props);

    this.state = { brandSelect: ""};

  }
  render() {
    var options = [
    { value: 'Volkswagen', label: 'Volkswagen' },
    { value: 'Seat', label: 'Seat' }
    ];


    return (
      <Select
          name="form-field-name"
          value={this.state.brandSelect}
          options={options}
          placeholder="Select a brand"
          searchable={false}
          onChange={}
      />
    )
  }
};

当选择该选项时，我希望将状态设置为所选的选项。

有人知道React Select如何做到这一点，因为文档并没有真正涵盖这一点？到目前为止，我已经尝试使用附加到onChange prop的set状态创建一个函数，但这并没有起作用。

Answer 1

在react 16.8+中，使用React钩子的实现应如下所示：

Hooks是React 16.8中的新增功能

function VehicleSelect() {

  const options = [
    { value: 'volkswagen', label: 'Volkswagen' },
    { value: 'seat', label: 'Seat' }
  ];

  const [selectedOption, setSelectedOption] = useState({ value: 'volkswagen', label: 'Volkswagen' });

  const [handleChange] = useState(() => {
    return () => {
      setSelectedOption(selectedOption);
    };
  });

  return (
    <div className="App">
      <Select
        name="form-field-name"
        placeholder="Select a brand"
        searchable={false}
        value={selectedOption}
        onChange={handleChange}
        options={options}
      />
    </div>
  );
}

Answer 2

您可以尝试向您的组件添加<Select />处理程序，该处理程序将处理class VehicleSelect extends React.Component { constructor(props) { super(props); this.state = { brandSelect: ""}; } _onChange(value) { //console.log(value) - just to see what we recive from <Select /> this.setState({brandSelect: value}); } render() { var options = [ { value: 'Volkswagen', label: 'Volkswagen' }, { value: 'Seat', label: 'Seat' } ]; return ( <Select name="form-field-name" value={this.state.brandSelect} options={options} placeholder="Select a brand" searchable={false} onChange={this._onChange.bind(this)} /> ) } }; 组件的更改。

RestTemplate restTemplate = new RestTemplate();
HttpHeaders headers = new HttpHeaders();
headers.setAccept(Arrays.asList(MediaType.APPLICATION_JSON));
headers.set(ApplicationConstants.API_KEY, ApplicationConstants.TEST_API_KEY_VALUE);
headers.set(ApplicationConstants.AUTH_TOKEN, ApplicationConstants.TEST_API_TOKEN_VALUE);
MultiValueMap<String, String> postParameters = new LinkedMultiValueMap<String, String>();
postParameters.add("purpose", cust.getPaymentPurpose());
postParameters.add("buyer_name", cust.getCustomerName());
postParameters.add("email", cust.getCustomerEmailId());
postParameters.add("phone", cust.getCustomerMobNum());
postParameters.add("send_email", "False");
postParameters.add("send_sms", "False");
HttpEntity<MultiValueMap<String, String>> requestEntity = new HttpEntity<MultiValueMap<String, String>>(postParameters, headers);
ResponseEntity<String> result = restTemplate.exchange("YOUR URL", HttpMethod.POST, requestEntity, String.class);
OnlinePaymentModel paymentModel = gson.fromJson(result.getBody(), OnlinePaymentModel.class);

Answer 3

试试这个：

class VehicleSelect extends React.Component {

    constructor(props) {
      super(props);

      this.state = {
        brandSelect: ""
      };

    }
    onSelectChanged(value) {
      this.setState({
        brandSelect: value
      });
    }
    render() {
        var options = [{
          value: 'Volkswagen',
          label: 'Volkswagen'
        }, {
          value: 'Seat',
          label: 'Seat'
        }];

        <Select
       name="form-field-name"
       value={this.state.brandSelect}
       options={options}
       placeholder="Select a brand"
       searchable={false}
       onChange={this.onSelectChanged.bind(this)}
       />

您需要一个onChange事件处理程序。将参数传递给事件处理函数，在这种情况下，该函数将是Select输入的选定值，然后使用所选值设置brandSelect的状态。

Answer 4

我在代码中使用了它来与选择器一起使用：

class VehicleSelect extends React.Component {

  constructor(props) {
    super(props);

    this.state = { brandSelect: ""};

  }

  onChange(event) {
    this.setState({brandSelect: event.target.value}); // important
  }

  render() {
    var options = [
    { value: 'Volkswagen', label: 'Volkswagen' },
    { value: 'Seat', label: 'Seat' }
    ];


    return (
      <Select
          name="form-field-name"
          value={this.state.brandSelect}
          options={options}
          placeholder="Select a brand"
          searchable={false}
          onChange={this.onChange.bind(this)}
      />
    )
  }
};