Question

所以我在这里使用React / Redux。在课堂之外，我有

const Question10 = () => (<div>
                  <p>Question goes here</p>
                  <input placeholder="type in your answer" type="text"></input>
                  <button>Submit Answer</button>
                  <Link to="/question/9">Previous Question</Link>
                  </div>)

正好在我开始上课时

class Questions extends React.Component {
  constructor(props){
    super(props)
    this.buttonClick = this.buttonClick.bind(this)
  }

  buttonClick(){
    console.log('button clicked');
  }

  render(){
    return (
          <Router>
            <div className="questions">
              <Route path ="/question/10" component={Question10}  />
            </div>
          </Router>

    )
  }
}

在const Question10我试过<button onClick={this.buttonClick}></button>和路线组件中，我尝试了同样的事情。在这种情况下如何进行onClick事件？谢谢！

Answer 1

1）

this.buttonClick = this.buttonClick.bind(this)

在构造函数中是不必要的

2）将函数传递给onClick属性

a）首先，让Question10接受参数并传递给按钮

const Question10 = (clickHandler) => (<div>
              <p>Question goes here</p>
              <input placeholder="type in your answer" type="text"></input>
              <button onCLick={clickHandler}>Submit Answer</button>
              <Link to="/question/9">Previous Question</Link>
              </div>)

b）将处理程序传递给Question10

<Route path ="/question/10" component={Question10(this.buttonClick.bind(this))}  />

如何将onClick事件添加到我的类之外的变量？

1 个答案: