时间戳

首页 > 解决方案 > 如何在 onSubmit 上使用嵌套函数或多个函数反应

reactjs - 如何在 onSubmit 上使用嵌套函数或多个函数反应

问题描述

这是我的代码

function MyModal(props) {
    const [modalIsOpen, setmodalIsOpen] = useState(false)
    return (
      <div className="App">
        <button onClick={()=>{setmodalIsOpen(true)}}>Open modal</button>
        <ListItems items={props.items}
    deleteItem={props.deleteItem}
    setUpdate={props.setUpdate}
    />
       <Modal isOpen={modalIsOpen} onRequestClose={()=>setmodalIsOpen(false)}>
       <header>
      <form id="to-do-form" onSubmit={props.addItem}>
        <input type="text" placeholder="Enter Text"
        value={props.currentItem}
        onChange={props.handleInput}
        />
        <button type="submit">Add</button>
      </form>
    </header>
  
         <button onClick={()=>{setmodalIsOpen(false)}}>Close</button>
       </Modal>
      </div>
    );
  }

问题是我想关闭onSubmit表单模式。但是当我setmodalIsOpen(false)在另一个页面（app.js）上使用它时，它在那里是未定义的。如果我声明另一个包含两者的函数，props.addItem那么setmodalIsOpen(false)两者都是未定义的。

这是我在另一个页面上的 addItem 方法

addItem(e){
    e.preventDefault();
    const newItem=this.state.currentItem;
    console.log(newItem);
    if(newItem!==""){
      const newItems=[...this.state.items,newItem];
      this.setState({
        items:newItems,
        currentItem:{
          text:'',
          key:''
        }
      })
    }
  }

标签： reactjsreact-hooks

解决方案

您必须使用父组件状态来显示带有道具的模型传递父状态并更新 addItem 上的状态（如果您的 addItem 在您的父组件中）

推荐阅读