javascript - 在按钮单击时调用功能组件以使用react

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/>}

    )
}