web-dev-qa-db-ja.com

反応選択でデフォルト値を設定する方法

反応選択の使用に問題があります。私はreduxフォームを使用し、react-selectコンポーネントをreduxフォームと互換性を持たせました。コードは次のとおりです。

const MySelect = props => (
    <Select
        {...props}
        value={props.input.value}
        onChange={value => props.input.onChange(value)}
        onBlur={() => props.input.onBlur(props.input.value)}
        options={props.options}
        placeholder={props.placeholder}
        selectedValue={props.selectedValue}
      />
    );

そして、ここで私がそれをレンダリングする方法：

<div className="select-box__container">
                  <Field
                    id="side"
                    name="side"
                    component={SelectInput}
                    options={sideOptions}
                    clearable={false}
                    placeholder="Select Side"
                    selectedValue={label: 'Any', value: 'Any'}
                  />
                </div>

しかし、問題は、私のドロップダウンが私が望むようにデフォルト値を持っていないことです。私が間違っているのは何ですか？何か案は？

reactjsdefault-valuereact-select
32
user7334203

次のようなものが必要だと思います。

const MySelect = props => (
<Select
    {...props}
    value={props.options.filter(option => option.label === 'Some label')}
    onChange={value => props.input.onChange(value)}
    onBlur={() => props.input.onBlur(props.input.value)}
    options={props.options}
    placeholder={props.placeholder}
  />
);
27
Ved

DefaultValueパラメーターを使用しました。オプションがドロップダウンから選択されたときにデフォルト値を更新する方法とデフォルト値を更新する方法を以下に示します。

<Select
  name="form-dept-select"
  options={depts}
  defaultValue={{ label: "Select Dept", value: 0 }}
  onChange={e => {
              this.setState({
              department: e.label,
              deptId: e.value
              });
           }}
/>
19
TejasPancholi

反応選択v2のためにここに来て、まだ問題がある場合-バージョン2は、オブジェクトをvalue、defaultValueなどとしてのみ受け入れるようになりました。

つまり、value={{value: 'one', label: 'One'}}だけでなく、value={'one'}を使用してみてください。

16
eedrah

同様のエラーが発生していました。オプションに値属性があることを確認してください。

<option key={index} value={item}> {item} </option>

次に、selects要素の値を最初にoptions値に一致させます。

<select 
    value={this.value} />
8
Drizzel

私はこれを自分で試し、reducer INIT関数でデフォルト値を設定することにしました。

選択をreduxでバインドする場合、実際の値を表さない選択デフォルト値で「バインド解除」せずに、オブジェクトを初期化するときに値を設定するのが最善です。

2
Joseph Juhnke

@ isaac-pakの答えを拡張すると、プロップでコンポーネントにデフォルト値を渡したい場合は、componentDidMount（）ライフサイクルメソッドの状態で保存して、デフォルトが最初に選択されるようにすることができます。

次のコードを更新して、より完全なものにし、コメントごとの初期値として空の文字列を使用することに注意してください。

export default class MySelect extends Component {

    constructor(props) {
        super(props);
        this.state = {
            selectedValue: '',
        };
        this.handleChange = this.handleChange.bind(this);

        this.options = [
            {value: 'foo', label: 'Foo'},
            {value: 'bar', label: 'Bar'},
            {value: 'baz', label: 'Baz'}
        ];

    }

    componentDidMount() {
        this.setState({
            selectedValue: this.props.defaultValue,
        })
    }

    handleChange(selectedOption) {
        this.setState({selectedValue: selectedOption.value});
    }

    render() {
        return (
            <Select
                value={this.options.filter(({value}) => value === this.state.selectedValue)}
                onChange={this.handleChange}
                options={this.options}
            />
        )
    }
}

MySelect.propTypes = {
    defaultValue: PropTypes.string.isRequired
};
2
Dan Meigs

Redux-formを使用せず、変更にローカル状態を使用している場合、react-selectコンポーネントは次のようになります。

class MySelect extends Component {

constructor() {
    super()
}

state = {
     selectedValue: 'default' // your default value goes here
}

render() {
  <Select
       ...
       value={this.state.selectedValue}
       ...
  />
)}
0
Isaac Pak

オプションがこのような場合

var options = [
  { value: 'one', label: 'One' },
  { value: 'two', label: 'Two' }
];

{props.input.value}は、'value'の{props.options}のいずれかに一致する必要があります

意味、props.input.valueは'one'または'two'のいずれかでなければなりません

0
naamadheya

In selectの値を自動選択するには。

enter image description here

<div className="form-group">
    <label htmlFor="contactmethod">Contact Method</label>
    <select id="contactmethod" className="form-control"  value={this.state.contactmethod || ''} onChange={this.handleChange} name="contactmethod">
    <option value='Email'>URL</option>
    <option value='Phone'>Phone</option>
    <option value="SMS">SMS</option>
    </select>
</div>

Selectタグでvalue属性を使用します

value={this.state.contactmethod || ''}

ソリューションは私のために働いています。

0
Mohit Sharma