我试图让我的待办事项列表在页面上显示我的工作,但它不想显示所有这些错误。我希望任务的用户输入显示为一个块 Cant 似乎弄清楚出了什么问题我查看了文本类型但那是正确的我不知道内容/用户输入是否没有被正确读取为字符串或什么.class App extends Component { constructor(props) { super(props); this.state = { noteText: "", notes: [] }; } updateNoteText(noteText) { this.setState({ noteText: noteText.target.value }); } addNote() { if (this.state.noteText === "") { return; } let notesArr = this.notes; notesArr.push(this.state.noteText); this.setState({ noteText: "" }); this.textInput.focus(); } handlekeyPress = event => { if (event.key === "Enter") {} }; deleteNote(index) { let notesArr = this.state.notes; notesArr.splice(index, 1); this.setState({ notes: notesArr }); } render() { let notes = this.state.notes.map((val, key) => { return ( <Todo key={key} text={val} deleteMethod={() => this.deleteNote(key)} /> ); }); return ( <div className="container"> <div className="header">React Todo List</div> <div className="btn" onClick={this.addNote.bind(this)}> + </div> {notes} <input type="text" ref={input => { this.textInput = input; }} className="textInput" value={this.state.noteText} onChange={noteText => this.updateNoteText(noteText)} onKeyPress={this.handlekeyPress.bind(this)} /> </div> ); }}export default App;
2 回答
至尊宝的传说
TA贡献1789条经验 获得超10个赞
您应该绑定this或使用箭头函数,并且正如@Rob 所说,您的代码中有一个小错误。
所以,只是改变这一行addNote() {来addNote = () => {,并deleteNote(index) {以deleteNote = (index) => {
慕的地8271018
TA贡献1796条经验 获得超4个赞
我认为这应该是:
let notesArr = this.state.notes;
而不是
let notesArr = this.notes;
字面意思是 this.notes 是未定义的。
添加回答
举报
0/150
提交
取消
