Question

请使用以下代码：

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

export default Search

是否可以将参数传递给props.onInput（特别是value的{{1}}属性）。我知道我可以将其创建为一个类，并创建一个将数据传递给<input>的处理程序，但我只是想知道是否可以以功能方式执行此操作。

Answer 1

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

之类的箭头功能

请参阅下面的代码段

＆＃13;

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'))

＆＃13;

<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>

＆＃13;

Answer 2

您可以使用Synthetic Event将值传递给回调。

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

功能ReactJS - 将数据/参数传递给回调

2 个答案: