發送到另一個容器時刪除屬性元素

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, I think you should use state in the parent component and provide state and state change function to the children by props.

示例工作流程：

家長：

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

child1 ：檢查輸入時調用props.onChange(1); //父狀態改變並重繪所有子：1

child2 ：檢查輸入時調用props.onChange(2); //父狀態改變並重繪所有子：2

child3：檢查輸入時調用props.onChange(3); //父狀態改變並重繪所有子：3

你應該像這樣制作組件。 那么我認為它會起作用。