web-dev-qa-db-fra.com

Comment utiliser la méthode onChange dans la liste déroulante de réaction sémantique

Quelqu'un peut-il m'aider à utiliser onChange dans la liste déroulante (Semantic UI React). Je lis les documents, mais je ne comprends pas. Il a des accessoires onChange.

onChange(event: SyntheticEvent, data: object)

Comment est-ce que je l'utilise? Comme, j'ai la méthode dropdownmethod().

edit - implémenté la suggestion, mais cela n'a pas fonctionné. Je pense que dans votre suggestion, vous n'avez pas lié la fonction. Mais, je lie la fonction.

  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

Comme indiqué dans la documentation, il vous suffit de passer une référence de votre méthode et vous obtiendrez alors 2 paramètres:

  1. L'événement natif

  2. L'objet de l'option sélectionnée

Voici un exemple courant

Voici un extrait de code (il utilise un CDN mais envoie des avertissements de débogage, alors ignorez-les)

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>

Modifier
Pour faire suite à votre commentaire.

J'ai vérifié l'exemple. Même là quand je tape quelque chose, ça ne me montre rien dans la console

Vous ne parlez pas de onChange du select dont vous parlez lorsque l'entrée de recherche a changé.
Vous pouvez utiliser onSearchChange avec les mêmes paramètres. (J'ai mis à jour l'exemple)

9
Sagiv b.g

utiliser l'événement onChange pour détecter les modifications dans la liste déroulante

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

utiliser l'événement onSearchChange pour détecter l'entrée de recherche

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

et vous devez définir searchMethod et changeMethod comme consts en haut de votre page.

1
Ahmed Said Bakheet

J'ai implémenté comme ci-dessous

La fonction React hooks est comme ci-dessous, si vous préférez, vous pouvez également passer handleOnChange comme accessoire

const RenderDropdown = ({optionsArray}) => {

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

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

tableau d'options comme ci-dessous

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

Voici le code de travail de la vôtre:

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