React：押したスペースの入力値をリセットする

Question

私は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は使用しないでください。

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

} 

Answer 2

あなたは本当にreduxを持っている必要はありません。人々はreduxを当然受け入れ始めた。 InputReceiverコンポーネントでonChangeハンドラを使用し、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>