小编Den*_*nys的帖子

ReactJS如何从列表中删除项目

我有代码创建<li>元素.我需要通过单击逐个删除元素.对于我拥有的每个元素Delete button.我知道我需要一些功能来删除项目id.如何使用此函数删除ReactJS中的元素?我的代码:

class TodoApp extends React.Component {
    constructor(props) {
        super(props);
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.state = {items: [], text: ''};
    }

    render() {
        return (
            <div>
                <h3>TODO</h3>
                <TodoList items={this.state.items} />
                <form onSubmit={this.handleSubmit}>
                    <input onChange={this.handleChange} value={this.state.text} />
                    <button>{'Add #' + (this.state.items.length + 1)}</button>
                </form>
            </div>
        );
    }

    handleChange(e) {
        this.setState({text: e.target.value});
    }

    handleSubmit(e) {
        e.preventDefault();
        var newItem = {
            text: this.props.w +''+this.props.t,
            id: Date.now()
        };
        this.setState((prevState) => ({
            items: prevState.items.concat(newItem),
            text: ''
        })); …
Run Code Online (Sandbox Code Playgroud)

javascript ecmascript-6 reactjs

9
推荐指数
1
解决办法
3万
查看次数

标签 统计

ecmascript-6 ×1

javascript ×1

reactjs ×1