Question

预期：

在更改输入框中的文本时，标题会更新为消息转换为大写。
按“发送”按钮时，更新的消息将打印在控制台

结果：

不行。控制台说错误＆＃39;这个＆＃39;在textBoxChange函数中未定义。（它在渲染函数中定义，但在textBoxChange函数中没有定义？）

Codepen：https://codepen.io/r11na/pen/qNKpQX

class App extends React.Component {
  textBoxChange(e) {
    this.props.text = e.target.value;
  };

  sendMessage(e) {
    console.log("Send message:" + this.props.text);
  };

  render() {
    return (
      <div>
        <h3>Your Message: {this.props.text.toUpperCase()}</h3>
        <MessageBox textBoxChange={this.textBoxChange} sendMessage={this.sendMessage} text={this.props.text}/>
      </div>
    );
  };
};

const MessageBox = (props) => {
  return (
    <div className="row column">
      <textarea onChange={props.textBoxChange} value={props.text}></textarea>
      <button onClick={props.sendMessage} className="button">Send</button>
      <br/>
    </div>
  );
};

Answer 1

我将props替换为state，添加了bind(this)方法并进行了少量更改：

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

    this.state = { text: this.props.text };
  }

  textBoxChange(e) {
    this.setState({ text: e.target.value });
  };

  sendMessage(e) {
    console.log("Send message:" + this.state.text);
  };

  render() {
    return (
      <div>
        <h3>Your Message: {this.state.text.toUpperCase()}</h3>
        <MessageBox
          textBoxChange={this.textBoxChange.bind(this)}
          sendMessage={this.sendMessage.bind(this)}
          text={this.state.text}
        />
      </div>
    );
  };
};

const MessageBox = (props) => {
  return (
    <div className="row column">
      <textarea onChange={props.textBoxChange.bind(this)} value={props.text}></textarea>
      <button onClick={props.sendMessage.bind(this)} className="button">Send</button>
      <br/>
    </div>
  );
};

为什么这不会像预期的那样反应组件代码功能？

1 个答案: