Question

在React中，每个具有值属性的<input>必须具有一个onChange处理程序。我想知道以下代码段中的最佳做法是什么，以避免产生无聊的信息。

import React,{Component} from 'react';

class SpellTest extends Component {
  constructor(props){
    super(props);
    this.state={
      chars:Array.from(props.word,()=>{return "?"})
    };
    this.handleInput=this.handleInput.bind(this);
  }
  handleInput(e){
    
    let key=e.key
    this.setState(preState=>{return {chars:preState.chars.map((k,i)=>{return this.props.word.charAt(i)===key?key:k})};})
  }
  render(){
    return <div>
        <h1>{this.props.hint}</h1>
        <input value={this.state.chars.join("")} onKeyPress={this.handleInput} onChange={()=>{}}/>
      </div>
  }
}

export default SpellTest;

//usage:
//<SpellTest word="hello" hint="你好"/>
//https://create-react-client.glitch.me/spell

Answer 1

我问这个问题的原因如下：

获取输入到输入字段中的每个键的最佳方法应该是 onKeyXXX像onKeyPress或onKeyDown（我无法获取密钥 onChange中的值）
React抱怨缺少onChange，这意味着应该有一种模式可以允许onChange与 onKeyXXX个处理程序，但我不知道如何

最后，我意识到chrome android不支持keypress事件。所以我必须更改代码，如下所示：

import React,{Component} from 'react';

class SpellTest extends Component {
  constructor(props){
    super(props);
    this.state={
      chars:Array.from(props.word,()=>{return "?"})
    };
    
    this.handleChange=this.handleChange.bind(this);
  }
  
  handleChange(e){
    
    let str=e.target.value;
    let str2=this.state.chars.join("");
    let index=[...str].findIndex((k,i)=>{return str.slice(0,i)+str.slice(i+1)===str2})
    
    if(index!==-1){
      this.setState(preState=>{return {chars:preState.chars.map((k,i)=>{return this.props.word.charAt(i)===str[index]?str[index]:k})};})
    }
  }
  render(){
    return <div>
        <h1>{this.props.hint}</h1>
        <input value={this.state.chars.join("")}  onChange={this.handleChange}/>
      </div>
  }
}

export default SpellTest;

Answer 2

输入应具有onChange才能知道如何更改value数据。只需将onKeyPress更改为onChange，一切都会正常工作。

我应该如何避免这种“警告：道具类型失败：您在没有onChange处理程序的情况下为表单字段提供了一个value道具。”

2 个答案: