React: сброс входного значения при нажатии пробела

Я новичок в React. В моем компоненте react у меня есть вход, и мне нужно сбросить значение ввода"", когда пользователь нажимает space button.
Компонент можно рассматривать следующим образом:

import React,{Component} from 'react';

export default class InputReceiver extends Component{

      render(){
          return(
            <div className="col-sm-10">
              <input type="text" className="form-control" onChange={this.props.inputHandler}/>
            </div>);
      }

}

Это правда, что я должен сделать это в action?
но действия не понимает input.

Пункт:
Я не должен использовать jQuery.

2 ответа

  1. Используется onKeyDownдля вызова функции, определяющей нажатие клавиши пробел. Если пробел нажат, выполните действие, которое сбросит значение ввода.

    Деталь

    import React,{Component} from 'react';
    import * as action from './path/to/action';
    
     class InputReceiver extends Component{
          detectSpacePresent = (e) => {
            if(e.keyCode == 32) {
                this.props.changeInputValue('');
            }
          }
          render(){
              return(
                <div className="col-sm-10">
                  <input type="text" className="form-control" value={this.props.inputValue} onChange={this.props.inputHandler} onKeyDown={this.detectSpacePresent}/>
                </div>);
          }
    
    }
    
    function mapStateToProps(state) {
      return {
        inputValue: state.inputValue;
      }          
    }
    
    function mapDispatchToProps(dispatch) {
      return {
        changeInputValue: bindActionCreator(action, dispatch);
      }          
    }
    
    export default connect(mapStateToProps, mapDispatchToProps)(InputReceiver);
    

    Экшен

    export function changeInputValue(val) {
      return {type:'CHANGE_INPUT_VALUE', data: val}
    }
    

    Редуктор

    export const = (state = {}, action) {
      switch(action.type) {
        case 'CHANGE_INPUT_VALUE': 
            return {inputValue: action.data}
      }
    
    }
    
  2. Вы действительно не должны иметь redux. Люди стали воспринимать reduxэто как должное. Можно просто использовать onChangeобработчик в InputReceiverкомпоненте и вызвать inputHandlerего из него. Пример ниже должен объяснить.

    Надеюсь, это поможет!

    class InputReceiver extends React.Component{
      constructor(props) {
        super(props)
        this.state = {
          value : ''
        }
        this.onChange = this.onChange.bind(this)
      }
      
      onChange(e){
        const val = e.target.value
        const lastChar = val[val.length - 1] //take only the last character
        if(lastChar === ' ') //check if the last character is a <space>
          this.setState({value: ''}) //if yes, reset value
         else
           this.setState({value: val})//if no, save the value
        this.props.inputHandler && this.props.inputHandler(e)
      }
      
      render(){
          return(
            <div className="col-sm-10">
              <input type="text" className="form-control" value={this.state.value} onChange={this.onChange}/>
            </div>);
      }
    }
    
    class App extends React.Component{
      inputHandler(e){
        console.log('called inputHandler')
      }
        render(){
          return <InputReceiver inputHandler={this.inputHandler} />
        }
    }
      ReactDOM.render(<App/>, 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>