html - 发送到另一个容器时删除属性元素

Question

我正在处理待办事项列表。当用户单击复选框时，它会出现在另一个容器中，但当发生这种情况时，我希望该复选框消失。

import React from 'react';

class Todo extends React.Component {
  state = {
    checked: false,
  };

  handleCheck = () => {
    this.setState({
      checked: !this.state.checked,
    });
  };

  handleClick = () => {
    this.props.handlecompletedList(this.props.title);
  };

  render() {
    const { title } = this.props;
    return (
      <div className="ui checked checkbox">
        <input type="checkbox" checked={this.state.checked} onChange={this.handleCheck} onClick={this.handleClick} />
        <label>Completed {title}</label>
      </div>
    );
  }
}
export default Todo;

import React from 'react';
import Todo from './Todo';

const Active = props => {
  const { items, handleComplete } = props;

  return (
    <div id="activeList">
      <h2 className="position">Active</h2>
      <ul id="tasks">
        {items.map(item => {
          return <Todo key={item.id} handlecompletedList={handleComplete} title={item.title} />;
        })}
      </ul>
    </div>
  );
};

import React from 'react';
import Todo from './Todo';

const Completed = props => {
  const { completedItems } = props;

  return (
    <div id="completedList">
      <h2 className="position">Completed</h2>
      <ul id="tasks">
        {completedItems.map(item => {
          return <Todo key={item.id} title={item.title} />;
        })}
      </ul>
    </div>
  );
};
export default Completed;

active 是当前的待办事项，当用户单击复选框时，它会出现在已完成的容器中。

Answer 1

Hannah，我觉得你应该在父组件中使用state，通过props给子组件提供状态和状态变化的功能。

示例工作流:

父级:

...
const [status, setStatus] = useState(0);  // status : 0
...
<child1 status={status} onChange={setStatus} />
<child2 status={status} onChange={setStatus} />
<child3 status={status} onChange={setStatus} />
...

child 1:检查输入时调用 props.onChange(1);//父状态改变并重绘所有子对象:1

child 2:当检查输入时调用 props.onChange(2);//parent status changed and redraw all child: 2

child 3:当检查输入时调用 props.onChange(3);//parent status changed and redraw all child: 3

你应该像这样制作组件。那么我认为它会起作用。