老师为什么我在输入框中输入东西发现只能显示打印的keycode。list下面怎么没能实现呢?
来源:2-12 更多 JSX 语法细节(2)
Vigorous阿炎
2020-12-12 00:00:40
原因是没有提前获取ul,ul里面没有写东西。为什么需要提前在ul里面写东西才能接下来进行keycode操作?自己每次都是直接进行keycode操作发现问题了才到ul里面加内容。但是一直不明白为什么要这样
todolist2.js代码
import React,{Component, Fragment} from 'react';
class TodoList2 extends Component{
constructor(){
super();
this.state=({
inputValue:'hello',
list:['a','b']
})
}
handleChange(e){
console.log(e.target.value)
this.setState({
inputValue:e.target.value
})
};
handleKeyUp(e){
console.log(e.keyCode)
if(e.keyCode===13){
const list=[...this.state.list,this.state.inputValue]
this.setState({list:list})
}
}
render(){
return (
<Fragment>
<input
value={this.state.inputValue}
onChange={this.handleChange.bind(this)}
onKeyUp={this.handleKeyUp.bind(this)}
/>
<ul>
</ul>
</Fragment>
)
}
}
export {TodoList2};
index.js代码部分
// 解析<app />这样jsx的写法
// Jsx语法里面两种标签,一种普通的html标签,第二种,组件标签首字母大写
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import {TodoList} from './TodoList.js';
import {TodoList2} from './TodoList2';
import {TodoList3} from './TodoList3';
ReactDOM.render(
<React.StrictMode>
<App />
<TodoList />
<TodoList3 />
<TodoList2 />
</React.StrictMode>,
document.getElementById('root')
);
在这里输入代码,可通过选择【代码语言】突出显示
2回答
好帮手慕言
2020-12-12
同学你好,理解的是对的,例如:让内容显示到页面上,就可以做点击某项把某项删除的效果了。祝学习愉快~
好帮手慕言
2020-12-12
同学你好,使用同学提供的代码测试,菜单没有显示出来是没有使用list,可以理解为:只往list数组中添加数据,但是却不使用list,页面上当然就不会显示菜单了。修改如下:
输入内容,点击回车,效果如下:
祝学习愉快~
相似问题
回答 3
回答 1