Question

想显示默认选项，但是无论我尝试如何似乎都不起作用

已经尝试过在线查找，但找不到任何有效的方法

<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>
);

Answer 1

尝试一下。

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”。使用select的默认值定义状态。

      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}

            />

Answer 2

如果您将 value={input.value || defaultValue } 放在 renderSelectField 组件中，您可以使其工作，但对我而言，它仅在触摸该字段后才会出现在 value 对象中。

设置Redux形式的选择字段的默认值

2 个答案: