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

    )
}

单击按钮时调用功能组件反应

1 个答案: