gpt4 book ai didi

css - 单击 react 更改整个列表的CSS

转载 作者:行者123 更新时间:2023-11-28 16:28:46 26 4
gpt4 key购买 nike

使用 React 制作了一个简单的待办事项应用程序。单击时的复选框将相应待办事项的 css 更改为删除线,悬停时会显示一个按钮,然后删除相应的待办事项。在这里我想实现两件事:1. 使用 React 在 'x' 上的鼠标单击事件更改整个待办事项列表的 css。2. 当我单击相应的列表项时更改单个待办事项的 css。我的应用程序代码是这样的。

class App extends Component {

constructor(){
super();
this.state={
todo:[]
};
};

entertodo(keypress){
var Todo=this.refs.inputodo.value;
if( keypress.charCode == 13 )
{
this.setState({
todo: this.state.todo.concat({Value:Todo, Decor:'newtodo animated fadeInLeft', checked:false})
});
this.refs.inputodo.value=null;
};
};
todo(text,i){
return (
<li className={text.Decor}>
<input type="checkbox" onChange={this.todoCompleted.bind(this,i)}className="option-input checkbox" checked={text.checked} />
<div key={text.id} className="item">
{text.Value}
<button type="button" className="destroy" onClick={this.remove.bind(this)}>X</button>
</div>
</li>
);
};

remove(i){
this.state.todo.splice(i,1)
this.setState({todo:this.state.todo})
};
todoCompleted(i){
var todo={...this.state.todo}
if(todo[i].checked){
this.state.todo[i].checked = false;
this.state.todo[i].Decor='newtodo'
this.setState({
todo: this.state.todo
});
}
else {
this.state.todo[i].checked = true;
this.state.todo[i].Decor= 'line'
this.setState({
todo: this.state.todo
});
}
};
**allDone(){
this.state.todo.style= 'line'
};**

render() {
return (
<div>
<h1 id='heading'>todos</h1>
<div className="lines"></div>
<div>
<input type="text" ref= "inputodo" onKeyPress={this.entertodo.bind(this)}className="inputodo"placeholder='todos'/>
**<span onClick={this.allDone}id="all">x</span>**
</div>
<div className="mainapp">
<ul>
{this.state.todo.map(this.todo.bind(this))}
</ul>
</div>
</div>
);
}
}
export default App;

我创建了一个名为 allDone() 的函数,并使用 onClick 事件将其分配给元素“X”。我无法将列表中所有元素的 css 更改为删除线。 enter image description here

最佳答案

您可以使用 forEach() 语句添加新类或更改 alldone 函数中的类。您还需要绑定(bind)此功能。

allDone= ()=>{
var todo = this.state.todo;

todo.forEach(function(item) {
item.Decor = "newtodo animated fadeInLeft strike"
})
this.setState({todo: todo});
};

class App extends React.Component {

constructor(){
super();
this.state={
todo:[]
};
};

entertodo(keypress){
var Todo=this.refs.inputodo.value;
if( keypress.charCode == 13 )
{
this.setState({
todo: this.state.todo.concat({Value:Todo, Decor:'newtodo animated fadeInLeft', checked:false})
});
this.refs.inputodo.value=null;
};
};
todo(text,i){
return (
<li className={text.Decor}>
<input type="checkbox" onChange={this.todoCompleted.bind(this,i)}className="option-input checkbox" checked={text.checked} />
<div key={text.id} className="item">
{text.Value}
<button type="button" className="destroy" onClick={this.remove.bind(this)}>X</button>
</div>
</li>
);
};

remove(i){
this.state.todo.splice(i,1)
this.setState({todo:this.state.todo})
};
todoCompleted(i){
var todo={...this.state.todo}
if(todo[i].checked){
this.state.todo[i].checked = false;
this.state.todo[i].Decor='newtodo'
this.setState({
todo: this.state.todo
});
}
else {
this.state.todo[i].checked = true;
this.state.todo[i].Decor= 'strike'
this.setState({
todo: this.state.todo
});
}
};
allDone= ()=>{
var todo = this.state.todo;

todo.forEach(function(item) {
item.Decor = "newtodo animated fadeInLeft strike"
})
this.setState({todo: todo});
};

render() {
return (
<div>
<h1 id='heading'>todos</h1>
<div className="lines"></div>
<div>
<input type="text" ref= "inputodo" onKeyPress={this.entertodo.bind(this)}className="inputodo"placeholder='todos'/>
<span onClick={this.allDone}id="all">x</span>
</div>
<div className="mainapp">
<ul>
{this.state.todo.map(this.todo.bind(this))}
</ul>
</div>
</div>
);
}
}
ReactDOM.render(<App/>,document.getElementById('app'));
.strike {
text-decoration: line-through;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script>
<div id="app"></div>

关于css - 单击 react 更改整个列表的CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40082681/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com