功能ReactJS - 传递数据/参数为Callback

Question

采取以下代码：

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

export default Search 

是否有可能将参数传递给props.onInput（具体的<input>的value属性）。我知道我可以创建这个类作为类，并创建一个处理程序，将数据传递到props.onInput，但我只是想知道是否有可能以功能的方式做到这一点。

Answer 1

您可以使用箭头功能一样<input type="text" onChange={ (e) => props.onInput(e.target.value) } />

见下

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

片段可以使用合成事件的值传递给回调。

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

如果你想通过只值，你可以使用e.currentTarget.value。

从currentTarget当前文档：

它总是指给事件处理程序已被连接到相对于将event.target标识在其上发生事件的元件的元件。

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