在按钮单击时调用功能组件

Question

我有一个功能组件，里面有一个按钮。单击该按钮时，我想调用一个功能组件。

当我们点击提交按钮时，预览按钮出现，当用户点击预览按钮时，预览功能组件被调用。

const Form =(props)=>{

handlePreview=(e)=>{
    e.preventDefault();

    return <Preview/>
  }

return(
<input name="email" type="text"/>
<button type="submit" onClick={props.handleSubmit}>Submit</button><br/>
  {props.render&& 
   <button type="submit" onClick={handlePreview}>Preview</button>
  }

)
}

当我单击提交按钮时，会显示预览按钮，但是当我单击预览按钮时，它不会导航到 <Preview> 功能组件

Answer 1

要渲染组件，您应该从函数Form 返回它。如果您从事件处理程序返回任何组件，它将被忽略。

所以要显示<Preview/> 组件，您应该创建本地状态。在功能组件中，可以使用React Hooks 来完成，如下所示

const Form =(props)=>{
    const [isPreviewShown, setPreviewShown] = useState(false);

    handlePreview=(e)=>{
        e.preventDefault();

        setPreviewShown(true); // Here we change state
    }

    return(
        <input name="email" type="text"/>
        <button type="submit" onClick={props.handleSubmit}>Submit</button><br/>
        {props.render&& 
            <button type="submit" onClick={handlePreview}>Preview</button>
        }
        {isPreviewShown && <Preview/>}

    )
}