[英]removing an attribute element when sent to another container
我正在处理一个待办事项列表。 当用户单击复选框时,它会出现在另一个容器中,但是当发生这种情况时,我希望该复选框消失。
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 是当前的待办事项,当用户单击复选框时,它会出现在已完成的容器中。
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
你应该像这样制作组件。 那么我认为它会起作用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.