Question

我正在学习React并且正在尝试编写一个程序，该程序在屏幕上显示按下的键的Unicode。没有弹出错误，但状态（按下的键和Unicode）也没有打印在屏幕上（状态发生了相应的改变）。道具已经设定，但它不起作用。

代码（Javascript）：

const key = props=>{
return (<p className="key" onTransitionEnd={props.transitionHandle}>{props.key}</p>);
    }

const charCode = props=>{
  return (<p className="charCode">{props.charCode}</p>);
}



class App extends React.Component{
  constructor(props){
    super(props);

    this.state = {key: "A", charCode: "65"}
    this.keydownHandle = this.keydownHandle.bind(this);

  document.addEventListener("keydown",function(event){
      this.keydownHandle(event);
      }.bind(this));
  }
  render(state){
    return (
      <div className="box">
        <charCode charCode={this.state.charCode}></charCode>
        <key onTransitionEnd={this.transitionHandle} key={this.state.key}></key>
      </div>
    );
  }
    keydownHandle(event){
    this.setState({
      key: String.fromCharCode(event.keyCode),
      charCode: event.keyCode
      });

  }
      transitionHandle(){ 
  document.getElementsByClassName("key").classList.remove("pressed");

  }
}

ReactDOM.render(<App/>,document.querySelector(".container"));

非常感谢。

Answer 1

一些事情

codepen

key是无法作为道具传递的特殊属性之一（来源：https://facebook.github.io/react/docs/lists-and-keys.html）
用户定义的组件必须大写 - 使用Key和CharCode代替key和charCode（来源：https://facebook.github.io/react/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized）

[React.js]子组件道具不起作用

1 个答案: