Question

我是JavaScript＆amp; ReactJS。

我添加了一个复选框＆amp;用户输入的每个任务的事件监听器。当用户选中该复选框时，与其关联的任务应该获得直通文本修饰。如何实现这一目标？

这是我的代码

import React from 'react';
import ReactDOM from 'react-dom';
var temp=[],ident=[],abc;
class App extends React.Component{
    constructor(props){
        super(props);
        this.state={
            userIn:'',
            arr:[]
        }
        this.handleChange=this.handleChange.bind(this);
        this.pusher=this.pusher.bind(this);
        this.checkBoxed=this.checkBoxed.bind(this);
    }

    checkBoxed(){
        //TODO
    //  item.style.textDecoration="line-through";
    }

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

    pusher(e){
        e.preventDefault();
        temp.push(this.state.userIn);
        this.setState({
            userIn:'',
            arr: temp
        });
    }

    render() {
        return (
            <div>
                <Input handleChange={this.handleChange} pusher={this.pusher}/>
                <Display userIn={this.state.userIn} arr={this.state.arr} checkBoxed={this.checkBoxed} />
            </div>
        );
    }
}

class Input extends React.Component{
    render() {
        return (
            <div>
            <form onSubmit={this.props.pusher}>
                <input onChange={this.props.handleChange} />
                <input type="submit" value="submit" onClick={this.props.pusher} />
                </form>
            </div>
        );
    }
}

class Display extends React.Component{
    render() {
        var temp=this.props.arr;
            var todoList = temp.map((data,index) => {
                return <Lister item={data}  key={index} zz={index} checkBoxed={this.props.checkBoxed} />
            });
        return (
            <div>
                <h4>Adding "{this.props.userIn}" to ToDo List</h4>
                <ul>{todoList}</ul>
            </div>
        );
    }
}

class Lister extends React.Component{
    render() {
        return (
            <div>
                <div><span >{this.props.item}</span><input type="checkbox" onClick={this.props.checkBoxed()}/></div>
            </div>
        );
    }
}

ReactDOM.render(<App />,document.querySelector('.container'));

Answer 1

欢迎使用Stack Overflow：）

而不是以下列格式存储您的待办事项：

arr: ['Go shopping', 'Walk the dog']

请考虑以下格式：

todos: [
  {id: 0, text: 'Go shopping', isCompleted: false},
  {id: 1, text: 'Walk the dog', isCompleted: false}
]

然后，当点击该复选框时，将isCompleted属性更新为true。

最后，在渲染待办事项时，您可以有条件地应用相关的CSS样式，例如：

<span style={{'text-decoration': this.props.isCompleted ? 'line-through' : 'none'}}>
  {this.props.text}
</span>

反应js的ToDo应用程序

1 个答案: