web-dev-qa-db-ja.com

セマンティックUIは、ドロップダウンでデフォルトの選択オプションに反応します

dropdownでデフォルトの選択オプションが必要です。以下のコードは、選択したオプションを追加すると機能しますが、デフォルトの選択したオプションではレンダリングされません。

render() {
        return (
            <Form onSubmit={this.handleFormSubmit}>
                <Form.Dropdown
                  placeholder="Select Options"
                  fluid multiple selection
                  options={this.state.options}
                  onChange={this.handleMultiChange}
                />
                <Button type="submit">Submit</Button>
            </Form>
        );
    }

defaultSelectedLabel={this.state.selected}を追加してみました。

this.state.selectedは、デフォルトで選択されている値がtrueであるオプションの配列です。

render() {
        return (
            <Form onSubmit={this.handleFormSubmit}>
                <Form.Dropdown
                  placeholder="Select Options"
                  fluid multiple selection
                  options={this.state.options}
                  onChange={this.handleMultiChange}
                  defaultSelectedLabel={this.state.selected}
                />
                <Button type="submit">Submit</Button>
            </Form>
        );
    }

しかし、次の警告が表示されます。

Warning: Failed prop type: Invalid prop defaultSelectedLabel supplied to Dropdown.

defaultValue propでも同じことをしましたが、同じエラーが発生しました

dropdownでデフォルトの選択オプションを取得するにはどうすればよいですか？

javascriptreactjssemantic-uisemantic-ui-react
9
user2456977

あなたは結果からそう遠くなかった。

defaultValue小道具で値の配列を ドキュメントが述べた として提供できます。

defaultValue {number | string | arrayOf}初期値または複数の場合は値の配列。

次に例を示します。

class YourComponent extends Component {
  componentWillMount() {
    this.setState({
      options: [
        {value:'1', text:'A'},
        {value:'2', text:'B'},
        {value:'3', text:'C'},
      ],
      selected: ['1', '2'], // <== Here, the values of selected options
    });
  }

  ...

  render() {
    return (
      <Form onSubmit={this.handleFormSubmit}>
        <Form.Dropdown
          placeholder="Select Options"
          fluid multiple selection
          options={this.state.options}
          onChange={this.handleMultiChange}
          defaultValue={this.state.selected} // <== here the default values
        />
        <Button type="submit">Submit</Button>
      </Form>
    );
  }
}

[〜＃〜] edit [〜＃〜]： ここに実際の例があります

14
Adrien Lacroix

単一の選択でも機能します：

import React, { Component } from 'react';
import { render } from 'react-dom';
import { Form, Button } from 'semantic-ui-react';
import './style.css';

class App extends Component {
  componentWillMount() {
    this.setState({
      options: [
        {value:'1', text:'Lamborghini Aventador 2016'},
        {value:'2', text:'VW Beetle 1971'},
        {value:'3', text:'Ford Mustang'},
      ],
      selected: '1',
    });
  }

  render() {
    return (
      <div>
        <Form onSubmit={this.handleFormSubmit}>
          <Form.Dropdown
            placeholder="Select Options"
            defaultValue={this.state.selected}
            fluid selection
            options={this.state.options}
          />
          <Button type="submit">Submit</Button>
        </Form>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));
0
Rastislav