在按键时创建事件答案

【问题标题】：Create an event on key press在按键时创建事件
【发布时间】：2016-01-13 00:44:55
【问题描述】：

我正在尝试创建一个组件，该组件将在文本输入到输入字段时触发一个事件。但是，似乎该事件仅在我刷新页面或从另一个组件分派事件时触发。即便如此，它也只会触发一次。

如何创建一个仅在输入中按下某个键时才调度事件的组件？如何确保增加 Counter 组件不会同时触发 onKeyPress 事件？

// Reducers
const counter = (state = 0, action) => {
    switch (action.type) {
        case 'INCREMENT':
            return state + 1;
        case 'DECREMENT':
            return state - 1;
        default:
            return state;
    }
};


// Store
const reducer = combineReducers(reducers);
const store = createStore(reducer);


// Components
const Counter = ({ value, onIncrement, onDecrement }) => (
    <div>
        <h1>{value}</h1>
        <button onClick={onIncrement}>+</button>
        <button onClick={onDecrement}>-</button>
    </div>
);

class TestComponent extends Component {
    render() {
        return (
            <input onKeyPress={ console.log('key pressed') } />
        );
    };
};


// Render
const render = () => {
  ReactDOM.render(
    <div>
        <Counter
          value={ store.getState().counter }
          onIncrement={ () => store.dispatch({ type: 'INCREMENT' }) }
          onDecrement={ () => store.dispatch({ type: 'DECREMENT' }) }
        />
        <TestComponent />
    </div>,
    document.getElementById('root')
  );
};
store.subscribe(render);
render();

【问题讨论】：

标签： javascript reactjs redux

【解决方案1】：

使您的onKeyPress 值成为一个函数。即

<input onKeyPress={(event) => console.log('key pressed', event)} />

【讨论】：