web-dev-qa-db-ja.com

セマンティックリアクティブドロップダウンでonChangeメソッドを使用する方法

誰かがドロップダウンでonChangeを使用する方法を手伝ってくれますか（セマンティックUI React）。私はドキュメントを読んでいますが、それでもまだわかりません。 onChangeプロパティがあります。

_onChange(event: SyntheticEvent, data: object)
_

どうやって使うの？同様に、メソッドdropdownmethod()があります。

編集-提案を実装しましたが、機能しませんでした。あなたの提案では、関数をバインドしなかったと思います。しかし、私は関数をバインドします。

_  onChangeFollower(event,data){

    console.log("on change follower",data.text)

  }

  render() {
    console.log("this.props",this.props)
    var onChangeFollower = this.onChangeFollower.bind(this)

    return (
      <div>
        <h2>project settings are here</h2>
        <h2>Add new Member</h2>

        <Dropdown onChange={onChangeFollower}
        placeholder='Select Member'
        fluid search selection options={arr} />

        <h2>List of members</h2>
        {lr}

      </div>
_
javascriptreactjssemantic-ui-react
7
Ankur Sharma

ドキュメントに記載されているように、メソッドの参照を渡すだけで、2つのパラメーターを取得できます。

  1. ネイティブイベント

  2. 選択されたオプションのオブジェクト

ここに実行例があります

コードスニペットを次に示します（CDNを使用しますが、いくつかのデバッグ警告をスローするため、無視します）

const { Dropdown } = semanticUIReact;

const languageOptions = [
  { key: 'eng', text: 'English', value: 'eng' },
  { key: 'spn', text: 'Spanish', value: 'spn' },
  { key: 'rus', text: 'Russian', value: 'Russian' },
]

class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      searchQuery: '',
      selected: null
    }
  }

  onChange = (e, data) => {
    console.log(data.value);
    this.setState({ selected: data.value });
  }

  onSearchChange = (e, data) => {
    console.log(data.searchQuery);
    this.setState({ searchQuery: data.searchQuery });
  }

  render() {
    const { searchQuery, selected } = this.state;
    return (
      <div>
        <Dropdown
          button
          className='icon'
          fluid
          labeled
          icon='world'
          options={languageOptions}
          search
          text={searchQuery}
          searchQuery={searchQuery}
          value={selected}
          onChange={this.onChange}
          onSearchChange={this.onSearchChange}
        />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/semantic-ui-react.min.js"></script>
<div id="root"></div>

編集
コメントへのフォローアップとして。

例を確認しました。そこに何か入力しても、コンソールには何も表示されません

検索入力が変更されたとき、あなたが話しているonChangeのselectについて話しているのではありません。
同じパラメーターでonSearchChangeを使用できます。 （例を更新しました）

9
Sagiv b.g

onChangeイベントを使用して、ドロップダウンリストの変更を検出します

onSearchChange={(e, v) => {
        changeMethod(e, v)
}}

onSearchChangeイベントを使用して検索入力を検出します

  onSearchChange={(e, v) => {
           searchMethod(e, v)
    }}

また、ページの上部でsearchMethodとchangeMethodをconstとして定義する必要があります。

1
Ahmed Said Bakheet

私は以下のように実装しました

React hooks関数は以下のとおりです。必要に応じて、handleOnChangeもプロップとして渡すことができます

const RenderDropdown = ({optionsArray}) => {

   const handleOnChange = (e, data) => {
      console.log(data.value);
   }

   return (
     <Dropdown
        placeholder='Please select'
        fluid
        selection
        options={optionsArray}
        onChange={handleOnChange}
      />
   );
}

以下のオプション配列

const optionsArray = [
  {
    key: 'male',
    text: 'Male',
    value: 'male',
    image: { avatar: true, src: 'https://semantic-ui.com/images/avatar/small/elliot.jpg' },
  },
  {
    key: 'female',
    text: 'Female',
    value: 'female',
    image: { avatar: true, src: 'https://semantic-ui.com/images/avatar/small/stevie.jpg' },
  }
]
1
NuOne

以下はあなたのコードです：

onChangeFollower(event, data){
    console.log("on change follower",data.text)
  }

render() {
    console.log("this.props",this.props)
    return (
      <div>
        <h2>project settings are here</h2>
        <h2>Add new Member</h2>

        <Dropdown onChange={this.onChangeFollower}
        placeholder='Select Member'
        fluid search selection options={arr} />

        <h2>List of members</h2>
        {lr}

      </div>
    )
}
0
Vinay Chaudhary