reactjs - 如何使用 react-select 设置公司名称？

Question

伙计们，任何人都可以帮助我实现 react-select，似乎缺少一些验证，因为当我执行 console.log() 时数据没有显示为值。预先感谢，React 总是一个复杂的话题。这是文本输入

import React from 'react';
import TextField from '@material-ui/core/TextField';
import InputLabel from '@material-ui/core/InputLabel';
import '../../style/TextInput.scss';

const TextInput = (props) => {
  //  Parsing props
  const {
    value,
    setValue,
    placeholder,
    variant = 'standard', //  Can be standard, filled or outlined
    label,
    showLabel,
    inputClassName = '',
    labelClassName = '',
    containerClassName = '',
    fullWidth = false,
    indexName,
    type = 'text',
    inputProps = {},
    error = false,
    errorText,
    onBlur,
  } = props;

  //  Handling input change
  const handleChange = (event) => {
    const newKey = indexName || label;
    const { target } = event;
    if (!target) { setValue(''); return; }
    const { value: newValue } = target;
    setValue(newKey, newValue);
  };

  //  Rendering input label
  const renderLabel = () => {
    if (!showLabel) { return null; }
    return (
      <InputLabel
        variant="standard"
        className={`text-input-label ${labelClassName}`}
      >
        {label}
      </InputLabel>
    );
  };

  //  Rendering
  return (
    <div className={containerClassName}>
      {renderLabel()}
      <TextField
        name={indexName}
        value={value}
        onChange={handleChange}
        placeholder={placeholder}
        variant={variant}
        className={`text-input ${inputClassName}`}
        color="primary"
        notched="false"
        fullWidth={fullWidth}
        type={type}
        InputProps={inputProps}
        error={error}
        helperText={errorText || ''}
        onBlur={onBlur}
      />
    </div>
  );
};

export default TextInput;

这是选择组件

import React, { useState } from 'react';
import Select from 'react-select';
import InputLabel from '@material-ui/core/InputLabel';
import '../../style/SelectInput.scss';

const options = [
  { id: 'o1', value: 'Bank', label: 'Bank' },
  { id: 'o2', value: 'Insurance Co.', label: 'Insurance Co.' },
  { id: 'o3', value: 'REIT', label: 'REIT' },
  { id: 'o4', value: 'Hedge Fund', label: 'Hedge Fund' },
  { id: 'o5', value: 'Investment Bank', label: 'Investment Bank' },
  { id: 'o6', value: 'Family Office', label: 'Family Office' },
  { id: 'o7', value: 'Other', label: 'Other' },
];

const SelectField = (props) => {
  const [selectedOption, setSelectedOption] = useState('none');
  //  Parsing props
  const {
    placeholder,
    variant = 'standard', //  Can be standard, filled or outlined
    label,
    showLabel,
    inputClassName = '',
    labelClassName = '',
    containerClassName = '',
    fullWidth = false,
    indexName,
    type = 'select',
    inputProps = {},
    error = false,
    errorText,
    onBlur,
  } = props;

  const handleChange = (event) => {
    setSelectedOption(event.value);
  };

  const renderLabel = () => {
    if (!showLabel) { return null; }
    return (
      <InputLabel
        variant="standard"
        className={`select-input-label ${labelClassName}`}
      >
        {label}
      </InputLabel>
    );
  };

  return (
    <div className={containerClassName}>
      {renderLabel()}
      <Select
        options={options}
        name={indexName}
        value={options.filter((option) => option.value === selectedOption)}
        onChange={handleChange}
        placeholder={placeholder}
        variant={variant}
        className={`select-input ${inputClassName}`}
        color="primary"
        notched="false"
        fullWidth={fullWidth}
        type={type}
        InputProps={inputProps}
        error={error}
        helperText={errorText || ''}
        onBlur={onBlur}
        label="Single select"
        key={options.id}
      />
    </div>
  );
};

export default SelectField;

问题是 company_name 属性是空的，当我选择某些东西时它没有获取值。

标签： reactjsreact-select