Functional ReactJS - Datenübergabe/Argumente an Callback

Question

Nehmen Sie den folgenden Code ein:

const Search = props => { 
    return (
     <div id="search"> 
      <h2>Live Search</h2> 
      <input type="text" onChange={ props.onInput } /> 
     </div> 
    ) 
} 

export default Search 

Ist es möglich, Argumente zu props.onInput (speziell das value Attribut <input>) zu übergeben. Ich weiß, dass ich dies als eine Klasse stattdessen erstellen kann, und einen Handler erstellen, der Daten an props.onInput übergibt, aber ich habe mich nur gefragt, ob es möglich ist, dies in einer funktionalen Weise zu tun.

Answer 1

Sie können unter

const Search = props => { 
 
    return (
 
     <div id="search"> 
 
      <h2>Live Search</h2> 
 
      <input type="text" onChange={ (e) => props.onInput(e.target.value) } /> 
 
     </div> 
 
    ) 
 
} 
 

 
const onInput = (val) => { 
 
    console.log(val) 
 
} 
 
ReactDOM.render(<Search onInput={onInput}/>, document.getElementById('app'))

<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> 
 
<div id="app"><div>

Answer 2

Sie können die synthetische Ereignis verwenden, um übergeben Sie den Wert an die Rückruf Verwendung von Pfeil Funktion wie <input type="text" onChange={ (e) => props.onInput(e.target.value) } />

sehen einen Ausschnitt machen.

https://facebook.github.io/react/docs/events.html

Wenn Sie nur den Wert zu übergeben möchten, können Sie e.currentTarget.value verwenden.

Von current Dokumentation:

Es bezieht sich immer auf das Element der Ereignishandler angebracht wurde, im Gegensatz zu event.target, die das Element identifiziert, auf dem das Ereignis aufgetreten ist.

const Search = props => { 
    return (
     <div id="search"> 
      <h2>Live Search</h2> 
      <input 
       type="text" 
       onChange={e => props.onInput(e.currentTarget.value) } /> 
     </div> 
    ) 
} 

export default Search