Question

我有一个无状态函数，可以映射并返回多个列表项。如您所见，它们已经为它们分配了一个类（"list-group-item"）。我现在也想为其分配一个条件CSS类，它会根据输入元素的选中/取消选中这些列表项的文本（CSS类称为“删除线”）。

此“事件”将通过道具onChange= {() => props.onDone(todo)}传递，以便有状态组件“知道”列表项被选中/未选中的更改。

如何完成此逻辑，以便有状态组件中的处理程序能够接收到该事件，可以根据选中/未选中框切换条件（以布尔值的形式），然后传递此条件 back < / em>到我的无状态组件，以根据条件（选中/未选中）更改类？（根据情况，选中的框应具有CSS类，未选中的框应没有CSS类）。有关上下文，请参见下文。

无状态函数，我要在<li>上应用条件类，其中在"list-group-item"中已经有一个叫onDone的类和一个道具<input>如果选中/取消选中复选框，则放弃更改：

import React from 'react'; const Todo = props => ( <div className="container"> <div className="col-md-8"> <div className="panel panel-default"> <div className="panel-heading">Your Current Todos</div> <ul className = "list-group"> {props.todo.map(todo => { return <li className = "list-group-item" key ={todo.id}><input type="checkbox" onChange= {() => props.onDone(todo)}/>{todo.text}<a onClick={() => props.onEdit(todo)} className="edit-todo glyphicon glyphicon-edit d-flex justify-content-between align-items-center" href="#"></a><a onClick={() => props.onDelete(todo)} className="delete-todo glyphicon glyphicon-trash" href="#"></a></li> }) } </ul> </div> </div> </div> ); export default Todo;

状态对象：

class App extends Component { constructor(props) { super(props); this.state = { id: 0, text: '', editText: '', editId: '', priority: 1, isEdit: false, completed: false, todos:[] };

将接收事件和切换状态的处理程序（为此保留了this.state.completed）：

handleComplete(todo){ //todo's properties can be accessed with todo.text for example if need to modify. //Receives the event from my prop `onChange= {() => props.onDone(todo)}` //Toggle this.state.completed so that based on this my stateless component can receive conditional styling }

Answer 1

我不确定您的待办事项数据的形状，我只是假设您的待办事项状态是待办事项对象的数组。您可以添加以下密钥：

todo = {
    id: 1,
    text: "example",
    completed: false
};

您的事件处理程序仅需要切换完成状态。像这样：

  handleComplete = todo => {
    this.setState({
        todos: this.state.todos.map(el => {
          if (el.id === todo.id) {
            const newObj = Object.assign({}, el);
            newObj.completed = !el.completed;
            return newObj;
          }
          return el;
        })
      });
  };

然后，当映射到您的待办事项对象时，您可以将className更改为模板字符串并有条件地应用类，例如：

<li className=`{list-group ${completed && "strike-through"}}`>

Answer 2

如果我正确理解了您的代码，则您应该仅可以根据completed变量的todo属性来有条件地确定类名称。例如，

<li className={'list-group-item' + todo.completed ? ' strike-through' : ''} ... />

类已经存在时的条件CSS样式问题

2 个答案: