相关疑难解决方法(0)

我正在使用ReactJS与Babel和Webpack以及使用ES6以及箭头函数的建议类字段.我理解箭头函数通过不重新创建每个渲染的函数来使事情更有效,类似于构造函数中的绑定方式.但是,如果我正确使用它们,我并不是100%确定.以下是我的代码在三个不同文件中的简化部分.

我的代码:

Main.js

prevItem = () => {
    console.log("Div is clicked")
}

render(){
    return (
         <SecondClass prevItem={this.prevItem} />
    )
}

SecondClass.js

<ThirdClass type="prev" onClick={()=>this.props.prevItem()} />

ThirdClass.js

<div onClick={()=>{this.props.onClick()}}>Previous</div>

题:

上面的代码是否正确使用箭头功能？我注意到对于SecondClass.js我也可以使用:

<ThirdClass type="prev" onClick={this.props.prevItem} />

由于我在原始函数定义中使用了ES6箭头函数,因此一种方法或另一种方法之间是否存在差异？或者我应该一直使用箭头语法直到我的最后一个div？

编辑:我不想只在单击按钮时调用handleChange.它与handleClick无关.我在@shubhakhatri回答的评论中给出了一个例子.

我想根据状态更改输入值,值正在改变,但它不会触发handleChange()方法.我该如何触发handleChange()方法？

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    value: 'random text'
    }
  }
  handleChange (e) {
    console.log('handle change called')
  }
  handleClick () {
    this.setState({value: 'another random text'})
  }
  render () {
    return (
      <div>
        <input value={this.state.value} onChange={this.handleChange}/>
        <button onClick={this.handleClick.bind(this)}>Change Input</button>
      </div>
    )
  }
}

ReactDOM.render(<App />,  document.getElementById('app'))

这是codepen链接:http://codepen.io/madhurgarg71/pen/qrbLjp