老师为什么我在输入框中输入东西发现只能显示打印的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

同学你好,理解的是对的,例如:让内容显示到页面上,就可以做点击某项把某项删除的效果了。祝学习愉快~

0

好帮手慕言

2020-12-12

同学你好,使用同学提供的代码测试,菜单没有显示出来是没有使用list,可以理解为:只往list数组中添加数据,但是却不使用list,页面上当然就不会显示菜单了。修改如下:

http://img.mukewang.com/climg/5fd44320097154ba06620387.jpg

输入内容,点击回车,效果如下:

http://img.mukewang.com/climg/5fd44337095899d702470141.jpg

祝学习愉快~

0
higorous阿炎
hp>所以说先得获取到list数据数据在页面显示了,才能添加额外的效果。

h020-12-12
共1条回复

0 学习 · 15276 问题

查看课程