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

Question

I am working on a todo list. When the user clicks the check box it appears in another container but when that happens I want that checkbox to disappear.

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;

The active is the current todo and when the user clicks the checkbox it appears in the completed container.

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.

Example workflow:

Parent:

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

child1: when checking the input call props.onChange(1); // parent status changed and redraw all child: 1

child2: when checking the input call props.onChange(2); // parent status changed and redraw all child: 2

child3: when checking the input call props.onChange(3); // parent status changed and redraw all child: 3

you should make the components like this. then I think it will work.