Установка значения по умолчанию для поля выбора в форме редукса - PullRequest
Новая
       23

Установка значения по умолчанию для поля выбора в форме редукса

1 голос
/ 10 июня 2019

Хочу, чтобы опция по умолчанию отображалась, но, похоже, не работает, независимо от того, что я пытаюсь

Уже пробовал смотреть в Интернете, но не могу найти ничего, что работает 

<Field 
  name="product_group"
  component={renderSelectField}
  label='Product Group'
  defaultValue={{label: "RT", value: "RT"}}
  options={this.state.options}
  placeholder="Select Product Group"
  multi={false}
/>

это для рендеринга 

export const renderSelectField = ({input, options, components, label, placeholder, disabled, multi, type, meta: {touched, error}}) => (
    <div>
        <label>{label}</label>
        <div>
            <Select
                value={input.value}
                onChange={input.onChange}
                onBlur={() => input.onBlur(input.value)}
                options={options}
                components={components}
                placeholder={placeholder}
                onBlurResetsInput={false}
                onSelectResetsInput={false}
                autoFocus
                disabled={disabled}
                isMulti={multi}
            />
            {touched && error && <span>{error}</span>}
        </div>
    </div>
);

1 Ответ

0 голосов
/ 11 июня 2019

Попробуйте это. 

class Select extends Component {

  render() {
    const { name, value, onChange, error, options } = this.props;
    return (
      <div className="form-group">
        <select
          className="form-control"
          id={name}
          name={name}
          value={value}
          onChange={onChange}
          error={error}
          >

          {options.map(option => (
            <option key={option.name} value={option._id}>
              {option.name}
            </option>
          ))}
        </select>
        {error && <div className="text-danger">{error}</div>}
      </div>
    );
  }
}

export default Select;

импорт выше класса в вашем основном компоненте. Я предполагаю, что вы определили это имя выбора как "paymentOption" в состоянии. Определите свое состояние со значением по умолчанию выбора. 

      state={
             paymentOption: "Receive Money"
            }


 payOptions = [
              { _id: "Send Money", name: "Send Money", value: "Send Money" },
              { _id: "Receive Money", name: "Receive Money", value: "Receive Money" 
             },
            ];

      <Select  name="paymentOption"
              onChange={e =>
              this.setState({
              paymentOption: e.currentTarget.value
            })
          }
              value={paymentOption}  // const {paymentOption} = this.state
              options={this.payOptions}  
              error={error}
              cssClass={styles.selectList}

            />
...