javascript - 状态在 ReactJS 中无法正常工作

Question

我想做的是将输入字段值存储到一个状态，然后，如果用户单击“保存”按钮或“存储”按钮，则输入字段将消失，因此编辑将是错误的。我正在尝试当用户单击“保存”按钮时检查状态长度。问题就在那里。据说是这个错误:Uncaught TypeError: Cannot read property 'state' of null，但我已经在 editData state 上存储了数据，为什么会这样，你能告诉我吗？

这里是更好理解的代码

class EditData extends Component {
    constructor(props) {
        super(props);
        this.handleChange = this.handleChange.bind(this);
        this.state = {
            editData: ''
        }
    }
    handleChange(e) {
        this.setState({editData: e.target.value})
    }

    save() {
        if (this.state.editData.length !== 0) {
            this.setState({isEditing: false});
            console.log(this.state.editData + 'Added on your database')
        } else {
            alert('Hahah Are you')
        }
        // console.log(this.refs.valTo.value);
    }
    render() {
        return (
            <div>
                <input onChange={this.handleChange} type="text" defaultValue={this.props.data}  /> <button onClick={this.save}>Save</button> <button>cancel</button>
            </div>
            );
    }
}

Answer 1

您需要绑定(bind)handleChange和save。 还要检查您是否在构造函数中初始化了 state。

在构造函数中执行以下操作:

this.handleChange = this.handleChange.bind(this);
this.save= this.save.bind(this);
this.state = {};