SOURCE

class TodoList extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            list: [],
            tempList: [],
            value: ""
        }
        this.addNum = this.addNum.bind(this)
        this.handleChange = this.handleChange.bind(this)
        this.handleDetele = this.handleDetele.bind(this)
        this.handleEditUpdate = this.handleEditUpdate.bind(this)

    }
    addNum() {
        if (this.state.value == '') {
            alert("不能为空！")
            return
        }
        this.setState(state => ({
            list: state.tempList.concat({ id: Date.now() * Math.random(), content: state.value }),
            value: "",
            tempList: []
        }))
    }
    handleChange(e) {
        let contentText = e.target.value
        if (contentText) {
            this.setState(state => ({
                tempList: state.list.concat(state.tempList),
                list: state.list.filter(item => item['content'].includes(contentText)),
                value: contentText
            }))
        } else {
            this.setState(state => ({
                tempList: [],
                list: state.tempList,
                value: ''
            }))
        }
    }
    handleDetele(id) {
        this.setState(state => ({
            list: state.list.filter(item => item.id != id)
        }))
    }
    handleEditUpdate(data) {
        this.setState(state => ({
            list: state.list.map(item => item.id == data.id ? data : item)
        }))
    }
    render() {
        return (
            <div>
                <input value={this.state.value} onChange={this.handleChange} placeholder="可实时搜索已增加的。" />
                <button onClick={this.addNum}>增加</button>
                <ListItem
                    list={this.state.list}
                    handleDetele={this.handleDetele}
                    searchText={this.state.value}
                    handleEditUpdate={this.handleEditUpdate}
                />
            </div>

        )
    }
}

class ListItem extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            isOpenEdit: false,
            curItem: {}
        }
        this.handleDetele = this.handleDetele.bind(this)
        this.handleEditUpdate = this.handleEditUpdate.bind(this)
        this.handleChange = this.handleChange.bind(this)
    }
    handleDetele(id) {
        this.props.handleDetele(id)
    }
    handleChange(e) {
        let value = e.target.value
        this.setState(state => ({
            curItem: { content: value, id: state.curItem.id }
        }))
    }
    handleEditUpdate(data) {
        this.props.handleEditUpdate(data)
        this.setState({ isOpenEdit: false })
    }
    render() {
        let editBox, searchResultBox = null
        if (this.state.isOpenEdit) {
            editBox = <div className="editBox">
                <span className="close" onClick={() => this.setState({ isOpenEdit: false })}></span>
                <input value={this.state.curItem.content} onChange={this.handleChange} />
                <br />
                <button onClick={this.handleEditUpdate.bind(this, this.state.curItem)}>确定</button>
            </div>
        } else {
            editBox = null
        }
        if (this.props.list.length == 0) {
            if (this.props.searchText != "") {
                searchResultBox = <p>暂无搜索结果！</p>
            } else {
                searchResultBox = <p>快增加些信息吧！</p>
            }

        } else if (this.props.list.length > 0) {
            searchResultBox = this.props.list.map((item, index) =>
                <li key={item.id}>
                    {item.content}——
                        <button onClick={() => this.setState({ isOpenEdit: true, curItem: item })}>编辑</button>
                    -
                        <button onClick={this.handleDetele.bind(this, item.id)}>删除</button>

                </li>
            )
        }
        return (
            <div>
                <ul>
                    {searchResultBox}
                </ul>
                {editBox}
            </div>

        )
    }
}
ReactDOM.render(
    <TodoList />,
    document.getElementById('root')
);

<div id="root"></div>

.editBox{
    width: 300px;
    background: greenyellow;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
}
.editBox .close::before{
    content: "关闭";
}
.editBox .close{
    position: absolute;
    right: 0px;
    top: 0;
    border: 1px solid black;
    border-radius: 25%;
}