#javascript #css #reactjs
#javascript #css #reactjs
Вопрос:
Здесь, в моем приложении, функция ‘todoCompleted’ вызывается при нажатии элемента списка или флажка. Когда я нажимаю флажок, код выполняется некорректно, стиль применяется только один раз, я не могу его переключить. Используется: «todo.checked===true? ‘line’:’newtodo'» в элементе li.
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, checked:false})
});
this.refs.inputodo.value=null;
};
};
todo(todo,i){
return (
<li className={todo.checked===true? 'line':'newtodo'}>
<div onClick={this.todoCompleted.bind(this,i)}>
<input type="checkbox" className="option-input checkbox" checked={todo.checked} />
<div key={todo.id} className="item">
{todo.Value}
<div className="Button">
<span className="destroy" onClick={this.remove.bind(this, i)}>X</span>
</div>
</div>
</div>
</li>
);
};
remove(i){
this.state.todo.splice(i,1)
this.setState({todo:this.state.todo})
};
todoCompleted(i){
var todo=this.state.todo;
{
todo[i].checked =true;
this.setState({
todo:this.state.todo
});
}
};
allCompleted=()=>{
var todo = this.state.todo;
var _this = this
todo.forEach(function(item) {
item.className = _this.state.finished ? "newtodo" : "line"
item.checked = !_this.state.finished
})
this.setState({todo: todo, finished: !this.state.finished})
};
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.allCompleted}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')); .line {
text-decoration: line-through;
color: red;
}
.newtodo{
text-decoration: none;
} <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> Ответ №1:
вы устанавливаете состояние в true всякий раз, когда оно получает щелчок, поэтому я заменил это на условное значение.
todo[i].checked =todo[i].checked?false:true;
т.е. Если установлено значение true, измените его на false, в противном случае сделайте его true
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, checked:false})
});
this.refs.inputodo.value=null;
};
};
todo(todo,i){
return (
<li className={todo.checked===true? 'line':'newtodo'}>
<div onClick={this.todoCompleted.bind(this,i)}>
<input type="checkbox" className="option-input checkbox" checked={todo.checked} />
<div key={todo.id} className="item">
{todo.Value}
<div className="Button">
<span className="destroy" onClick={this.remove.bind(this, i)}>X</span>
</div>
</div>
</div>
</li>
);
};
remove(i){
this.state.todo.splice(i,1)
this.setState({todo:this.state.todo})
};
todoCompleted(i){
var todo=this.state.todo;
//removed curly braces as not used and added contion to set true or false
todo[i].checked =todo[i].checked?false:true;
this.setState({
todo:this.state.todo
});
};
allCompleted=()=>{
var todo = this.state.todo;
var _this = this
todo.forEach(function(item) {
item.className = _this.state.finished ? "newtodo" : "line"
item.checked = !_this.state.finished
})
this.setState({todo: todo, finished: !this.state.finished})
};
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.allCompleted}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')); .line {
text-decoration: line-through;
color: red;
}
.newtodo{
text-decoration: none;
} <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> Комментарии:
1. можете ли вы немного объяснить, как сделать [i].проверено? false:true; работает здесь
2. когда вы добавляете новое задание, его значение равно false, поэтому, когда вы нажимаете на него в первый раз, оно приходит, чтобы проверить, является ли оно false, оно устанавливает значение true, а когда вы снимаете флажок, оно начинает функционировать, и теперь значение true, поэтому оно меняет его на false todo[i].проверено = todo[i].проверено? false:true эквивалентно if( todo[i].проверено==true) { todo[i].проверено=false } else {todo[i].проверено = true}