react-selectでデフォルト値を設定する方法


91

react-selectの使用に問題があります。私は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>

しかし、問題は、ドロップダウンに希望どおりのデフォルト値がないことです。私が間違っているのは何ですか?何か案は?


これは正しいです:value = {props.input.value}。あなたが直面している問題は何ですか?
2017

私の問題は、最初にレンダリングするときにselectにdefaultValueを設定したいのですが、できません
user7334203 2017

1
最初にレンダリングするときのprops.input.valueの値は何ですか?
2017

それが私の問題です。デフォルト値に設定するにはどうすればよいですか?
user7334203 2017

どんな価値が欲しいですか?
2017

回答:


69

私はあなたがこのようなものが必要だと思います:

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

6
redux / reactとのバインディングのポイントは、uiがオブジェクトの値をリアルタイムで反映するようにすることです。このアプローチは、そのバインディングを切り離します。レデューサーでデフォルト値を設定することを検討してください。
Joseph Juhnke 2017

2
@JosephJuhnkeは最初に質問を確認してください。デフォルト値の設定方法です。
2017

5
selectedValueに変更されましたvalue。ドキュメントのチェックreact-select.com/propsを
transang

11
defaultValue新しいバージョンには現在フィールドがあります。
HongboMiao19年

3
トリッキーなことは、オプションの値ではなく、選択したオブジェクトを「defaultValue」フィールドに設定する必要があることです。例えば0,1,2
andyCao

50

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

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

8
おかげで、defaultValueが値だけでなくオブジェクトを受け取ることがわかりました。
デニス・リュー

1
Reactのドキュメントやインテリセンスによるとそうではありません:reactjs.org/docs/unconnected-components.html#default-values
Alex

@ Alex-(そして2年後のここにいる人にとって)この質問は、コンポーネントライブラリであるreact-selectに関するものでした。リンクしたドキュメントは、ネイティブHTML選択要素を参照しています。
ラシャド・ナシル

38

ここにreact-selectv2のために来て、それでも問題が発生する場合-バージョン2は、オブジェクトをvalue、としてのみ受け入れるようになりました。defaultValueなど、

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


どうもありがとうございました
JohnnyBigoode20年

不完全な。値をそれに設定すると、値を変更できなくなります
Toskan 2020

@ Toskan-はい、これはReactJSと一方向のデータバインディングの原則の1つであり、このライブラリだけでなくすべてのフォーム要素に影響します。制御コンポーネントを使用する場合は、react以外で変更を自分で処理する必要があります。:リアクトドキュメントに至るまで、それとリンクについてこれが答え会談stackoverflow.com/questions/42522515/...
eedrah

十分に公平ですが、どのような問題を解決しますか?つまり、値をハードコーディングしますか?
トスカン

ここに示したケース{value: 'one', label: 'One'}は単なる例です。アプリケーションでは、これは同じ構造の変数/小道具になります。
eedrah

14

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

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

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

<select 
    value={this.value} />

これが最良/最もエレガントなソリューションだと思います。私はそれを考えるのは正しいですか?
user2026178 2017

そうしても値は変更されません。onChange関数を記述しすぎて変更を設定します
raghul 2018

1
これはバニラHTMLの<select>要素用であり、react-select <Select>ではありません。これが質問の対象でした。ケーシングはすべての違いを生むことができます:)
マイクゴートリー

6

@ 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.target.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
};

私はこれを受け取ります:警告:valueproponはselectnullであってはなりません。空の文字列を使用してコンポーネントをクリアするかundefined、制御されていないコンポーネントを使用することを検討してください。
ジェイソンライス

私も同じことをしていますが、次の警告が表示されます。Warning: A component is changing a controlled input of type hidden to be uncontrolled. Input elements should not switch from controlled to uncontrolled (or vice versa).
alexventuraio19年

@AlexVenturaコードをもう少し完全なものにして、システムでテストしました。制御された入力に関する警告が表示されません。編集した応答に基づいてコードを更新し、見つけたものを投稿してください。
DanMeigs19年

2

私はこれを自分で試し、レデューサーのINIT関数でデフォルト値を設定することを選択しました。

selectをreduxでバインドする場合は、実際の値を表さないselectのデフォルト値で「バインド解除」するのではなく、オブジェクトを初期化するときに値を設定することをお勧めします。



1

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

class MySelect extends Component {

constructor() {
    super()
}

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

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

1

オプションでグループを使用する場合は、詳細検索を行う必要があります。

options={[
  { value: 'all', label: 'All' },
  {
    label: 'Specific',
    options: [
      { value: 'one', label: 'One' },
      { value: 'two', label: 'Two' },
      { value: 'three', label: 'Three' },
    ],
  },
]}
const deepSearch = (options, value, tempObj = {}) => {
  if (options && value != null) {
    options.find((node) => {
      if (node.value === value) {
        tempObj.found = node;
        return node;
      }
      return deepSearch(node.options, value, tempObj);
    });
    if (tempObj.found) {
      return tempObj.found;
    }
  }
  return undefined;
};

0

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

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

あなた{props.input.value}はあなたの中の1つと一致する必要'value'があります{props.options}

意味は、またはのprops.input.valueいずれかである必要があります'one''two'


0

inselectの値を自動選択します。

ここに画像の説明を入力してください

<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
  1. コンストラクターでデフォルトのオプションテキストの状態プロパティを作成します
    • デフォルトのオプション値について心配する必要はありません
  2. レンダリング関数にオプションタグを追加します。状態と3値式を使用してのみ表示
  3. オプションが選択されたときに処理する関数を作成します
  4. このイベントハンドラ関数のデフォルトオプション値の状態をnullに変更します

    Class MySelect extends React.Component
    {
        constructor()
        {
            super()
            this.handleChange = this.handleChange.bind(this);
            this.state = {
                selectDefault: "Select An Option"
            }
        }
        handleChange(event)
        {
            const selectedValue = event.target.value;
            //do something with selectedValue
            this.setState({
                selectDefault: null
            });
        }
        render()
        {
            return (
            <select name="selectInput" id="selectInput" onChange={this.handleChange} value= 
                {this.selectedValue}>
             {this.state.selectDefault ? <option>{this.state.selectDefault}</option> : ''}
                {'map list or static list of options here'}
            </select>
            )
        }
    }
    

0

私はこのようなものを頻繁に使用しています。

この例の小道具のデフォルト値

if(Defaultvalue ===item.value) {
    return <option key={item.key} defaultValue value={item.value}>{plantel.value} </option>   
} else {
    return <option key={item.key} value={item.value}>{plantel.value} </option> 
}
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.