在按鍵上創建事件

我試圖創建一個組件，只要將文本輸入到輸入字段中，該組件就會觸發一個事件。但是，似乎事件只會在刷新頁面或從其他組件分派事件時觸發。即使那樣它也只會發射一次。在按鍵上創建事件

如何創建只在輸入內部按鍵時分派事件的組件？如何確保遞增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();

來源

2016-01-13 Colton Allen

使您的onKeyPress值成爲函數。即

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

來源

2016-01-13 00:51:14

在按鍵上創建事件

回答

相關問題