Javascript 在reactJS中显示/隐藏元素

我第一次在React.js上乱搞，找不到在标签上显示或隐藏新输入字段的方法。 我搞砸了一点，但最后我被卡住并删除了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;

import React，{Component}来自“React”；
从“uuid”导入{v4作为uuidv4}；
导入“/App.css”；
类应用程序扩展组件{
状态={
待办事项：[]，
};
handleInputValue=（事件）=>{
log（'----handleinputvalue'）；
this.setState（{inputValue:event.target.value，id:uuidv4（）}）；
}
附加项=（）=>{
让{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'）；
返回(
欢迎使用待办事项列表应用程序
this.addItem（）}className={'btn btn primary'}>Add

{this.state.todos.map（（项）=>

{item.inputValue}
this.deleteItem（item.id）}className={'btn btn primary'}>Delete
编辑
）}

)
}
}
导出默认应用程序；

您需要的是条件渲染

基本上，只在条件为真时渲染组件。特别是查看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>
  );
};

---

您要查找的是条件渲染

基本上，只在条件为真时渲染组件。特别是查看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>
  );
};

---

这里到底是什么问题？显示/隐藏某些内容的方法是a）向组件的

状态添加相应的变量

b）编写呈现元素的JSX，或者不呈现：

{this.state.isVisible&&&}

c）像往常一样使用

setState

来更改可见性（您还应该编辑您的问题，以包含一个清晰的问题陈述；现在它有被关闭的危险，因为“需要详细信息或清晰”）这里到底是什么问题？显示/隐藏某些内容的方法是a）向组件的

状态添加相应的变量

b）编写呈现元素的JSX，或者不：

{this.state.isVisible&&…}

c）像往常一样使用

setState

来更改可见性（您还应该编辑您的问题以包含清晰的问题陈述；现在它有关闭的危险，因为“需要详细信息或清晰性”）