Question

我正在尝试让 SigninForm 将电子邮件传递回调用它的组件（应用程序）。然后当电子邮件更新时应用程序应该重新呈现。我试图创建 an earlier question 中给出的结构。但是，我无法让 App 组件更新并在我的 React 代码中显示电子邮件。

TLDR：为什么当我单击按钮时电子邮件没有显示在代码段上？

function App() {
  const [email, setEmail] = React.useState();

  return ( 
    <div>
      EMAIL: {email} 
      <br></br> 
      <SigninForm setEmail={setEmail}/> 
    </div>
  )
}

function SigninForm() {
  const [email, setEmail] = React.useState()

  var credsSubmit = (event) => {
    event.preventDefault();
    setEmail('me@me.com')
  }
  
  return ( 
    <div>
      <form onSubmit={credsSubmit}>
        <input type='submit' />
      </form> 
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('root'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 1

function App() {
  const [email, setEmail] = React.useState();

  return ( 
    <div>
      EMAIL: {email} 
      <br></br> 
      <SigninForm setEmail={setEmail}/> 
    </div>
  )
}

function SigninForm(props) {
  const [email, setEmail] = React.useState()

  var credsSubmit = (event) => {
    event.preventDefault();
    props.setEmail('me@me.com')
  }
  
  return ( 
    <div>
      <form onSubmit={credsSubmit}>
      <input type='submit' />
      </form> 
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('root'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<div id="root"></div>

1-在 App 组件中，您将 setEmail 作为道具传递给 SigninForm 这一行：

<SigninForm setEmail={setEmail}/>

2-在 SigninForm 中，您正在创建一个状态变量 email 和一个 setter 函数来设置其值 setEmail，即这一行：

const [email, setEmail] = React.useState()

在 SigninForm 中，您调用 setEmail 认为这将更新 App 组件的状态，而实际上您调用的是本地 setEmail 而不是您收到的那个道具。

通过调用 props.setEmail，您正在调用来自 App 组件而不是本地组件的方法。

这里是关于 components and props

的反应指南

Answer 2

function App() {
  const [email, setEmail] = React.useState();
  return ( 
    <div>
      EMAIL: {email} 
      <br></br> 
      <SigninForm setEmail={setEmail}/> 
    </div>
  )
}

function SigninForm(props) {
  var credsSubmit = (event) => {
    event.preventDefault();
    props.setEmail('me@me.com')     // changed this and removed local email state
  }
  
  return ( 
    <div>
      <form onSubmit={credsSubmit}>
        <input type='submit' />
      </form> 
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('root'));

Answer 3

你试过一个按钮吗？

function App() {
  const [email, setEmail] = React.useState();

  return ( 
    <div>
      EMAIL: {email} 
      <br></br> 
      <SigninForm setEmail={setEmail}/> 
    </div>
  )
}

function SigninForm() {
  const [email, setEmail] = React.useState()

  var credsSubmit = (event, data) => {
    event.preventDefault();
    props.setEmail(data.email.toLowerCase());
  }
  
  return ( 
    <div>
      <form onSubmit={credsSubmit}>
        <input name="email" />
        <button type="submit">Submit</button>
      </form>
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('root'));

当子组件更新时，React 不会重新渲染

3 个答案: