Question

我有一个输入和一个按钮

<input className="form-control" value={this.state.sentence} onChange={this.onChange}/>
<button type="button" onClick={this.handleSentence}></button>

我在构造函数中绑定了两个函数。

onChange(e) {this.setState({sentence: e.target.value});}

handleSentence(e) {console.log('string -->',this.state.sentence)}

on handleSentence函数log返回Cannot read property 'state' of null。

但在render(let{sentence}=this.state)中返回正确的值，我也会在输入中看到我输入的内容

这里是构造函数：

class SentenceForm extends Component {
    constructor(props) {
        super(props)
        this.state = {
            sentence: '',
            splitedSentenceArray:[]
        }
        this.onChange = this.onChange.bind(this);
        this.onClick = this.handleSentence.bind(this);
    }

Answer 1

最佳做法是在绑定时保持函数名称相同。它可以避免在您的情况下造成不必要的混淆。您已经使用不同的名称对handleSentence函数进行了绑定，但仍然使用相同的名称对其进行调用，因此在您的情况下函数被调用但由于它被不同的名称绑定，因此它没有引用正确的上下文，状态存在。

class SentenceForm extends Component {
    constructor(props) {
        super(props)
        this.state = {
            sentence: '',
            splitedSentenceArray:[]
        }
        this.onChange = this.onChange.bind(this);
        this.handleSentence = this.handleSentence.bind(this);
    }

Answer 2

它应该是这样的：

<input className="form-control" value={this.state.sentence} onChange={this.onChange}/>
<button type="button" onClick={this.onClick}></button>

您将handleSentence方法绑定到this.onClick。那是错的。

无法读取null的属性'state'

2 个答案: