课程
下载APP
源自:2-2 完成新增列表项的功能

idea中运行视屏代码却不能正常输入,去掉input中value的值,输入第一次显示空格,第二次出现第一次的值

import React from 'react';

 class ToDoList extends React.Component{

    constructor(props) {
        super(props);
        this.state = {//数据项
            list: [
                'test1',
                'test2',
                'test3'
            ],
            inputValue:''
        }
    }

    handleBtnClick()
        {
            this.setState({
                list:[...this.state.list, this.state.inputValue],
                inputValue:''
            })
            // this.state.list.push('hello dnf');
            // alert('click');
        }
     handleInputChange(e){
        // console.log(e.target.value);
         this.setState({
             inputValue: e.target.value
         })
     }
     render()
        {
            return (
                <div className="ToDoList">
                    <div>
                        <input value={this.state.inputValue} onClick={this.handleInputChange.bind(this)}/>
                        <button onClick={this.handleBtnClick.bind(this)}>add</button>
                    </div>
                    <ul>
                        {
                            this.state.list.map((item,index) => {
                                return <li key={index}>{item}</li>
                            })
                        }
                    </ul>
                </div>
            );
        }
    }
    export default ToDoList;

https://img1.mukewang.com/5d43fe61000130f913600449.jpg

提问者:jet阳阳 2019-08-02 16:46

2个回答

  • jet阳阳
    2019-08-02 17:23

    将input的value改为defaultValue即可,只读问题

  • jet阳阳
    2019-08-02 17:11

    https://img.mukewang.com/5d43fe44000130f913600449.jpg错误信息