Question

我是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。

Answer 1

使用React Hooks，您可以执行以下操作：

使用onKeyDown字段上的< input />属性记录每次按键。检查所按下的键是否为空格（在这种情况下为ASCII值32），然后重置输入字段。

 const InputField = () => {
      const [inputValue, setInputValue] = React.useState("");
    
      const handleInputChange = (e) => {
        setInputValue(e.target.value);
      };
    
      const handleSpace= (e) => {
        if (e.keyCode === 32) {
          setInputValue("");
        }
      };
      return (
        <div>
          <input
            type="text"
            value={inputValue}
            onChange={handleInputChange}
            onKeyDown={handleSpace}
          />
          <p>Entered value: {inputValue} </p>
        </div>
      );
    };

注意：KeyboardEvent.keyCode已deprecated。而是使用KeyboardEvent.key。在上面的示例中，将是：

  const handleSpace= (e) => {
    if (e.key === " ") {
      setInputValue("");
    }
  };

Answer 2

使用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 3

你真的不需要redux。人们开始认为redux是理所当然的。您只需在onChange组件中使用InputReceiver处理程序，然后从中调用inputHandler即可。下面的例子应该解释。

希望它有所帮助！

＆＃13;

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'))

＆＃13;

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

＆＃13;

React：重置按下的空间上的输入值

3 个答案: