按鍵創建事件

Question

我正在嘗試創建一個組件，只要在輸入字段中輸入文本，該組件便會觸發事件。 但是，似乎該事件僅在刷新頁面或從另一個組件分派事件時才觸發。 即使那樣，它也只會觸發一次。

如何創建僅在輸入中按下鍵時才調度事件的組件？ 如何確保增加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();

Answer 1

使您的onKeyPress值成為函數。 即

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