我第一次弄乱React.js,找不到在我的标签位置显示或隐藏New输入字段的方法。我有点混乱,但最后我被卡住并删除了editItem代码,这是到目前为止的代码,我不知道如何继续/创建editItem函数。有任何建议吗?
import React, {Component} from "react";
import {v4 as uuidv4} from 'uuid';
import "./App.css";
class App extends Component {
state = {
todos: [],
};
handleInputValue = (event) => {
console.log('-------handleinputvalue');
this.setState({inputValue: event.target.value, id: uuidv4()});
}
addItem = () => {
let {inputValue, todos, id} = this.state
this.setState({todos: [...todos, {inputValue, id}]})
console.log('Assigned id to new item',this.state)
}
deleteItem = (todoID) => {
const todos = this.state.todos.filter((item => item.id !== todoID))
this.setState({todos})
console.log('------todoId',todoID)
}
editItem =(todoId) => {
}
render() {
console.log('-------render');
return (
<div className={"App"}>
<div className="App-header">
<h2>Welcome to To-Do List App</h2>
</div>
<input onChange={this.handleInputValue} name={''} type='text'/>
<button onClick={() => this.addItem()} className={'btn btn-primary'}>Add</button>
<ul>
{this.state.todos.map((item) => <li key={uuidv4()}>
<input type={'checkbox'}/>
<label>{item.inputValue}</label>
<input type={'text'} className={'hidden'}/>
<button onClick={() => this.deleteItem(item.id)} className={'btn btn-primary'}>Delete</button>
<button className={'btn btn-primary'}>Edit</button>
</li>)}
</ul>
</div>
)
}
}
export default App;
您正在寻找的是条件渲染。
基本上,仅当条件为true时才渲染组件。查看React文档,特别是关于内联&&运算符的部分。
一个简单的例子:
使用&&
运算符仅在条件为真时才呈现某些内容:
const Component = () => {
const [showMessage, setShowMessage] = useState(false);
return (
<div>
<button onClick={() => setShowMessage((p) => !p)}>Toggle message</button>
// the message div will only be rendered when showMessage is true
{showMessage && <div>This is a message!</div>}
</div>
);
};
使用三元运算符condition ? a : b
呈现一件事或另一件事:
const Component = () => {
const [showFirstMessage, setShowFirstMessage] = useState(false);
return (
<div>
<button onClick={() => setShowFirstMessage((p) => !p)}>
Toggle message
</button>
// If showFirstMessage is true, the first message will be rendered, else the second message will be rendered
{showFirstMessage ? (
<div>I'm the first message!</div>
) : (
<div>Hi, I'm the second message</div>
)}
</div>
);
};
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句