反應：我表單的 onSubmit 處理程序中的 Function 無法正常工作

Question

原諒我，因為我才學習 React 才 2 天。

我有一個 SearchForm 組件，這是一個可以提交數字的簡單表單。 我希望此表單中的 onSubmit 處理程序顯示另一個名為 SearchResult 的組件，該組件目前僅顯示我們剛剛查找的數字。 出於某種原因，我的網頁沒有顯示 SearchResult，而 SearchForm 正確呈現。 太感謝了！

function SearchForm( props ) {
  const [ trackNo, setTrackNo ] = useState('');

  function handleSubmit( event ) {
    event.preventDefault();
    // props.onSubmit( trackNo );
    <SearchResult trackingNum={trackNo}/>
    setTrackNo('');
  }
  return (
    <div className="SearchBar">
      <h3>Track a Package</h3>
      <form onSubmit={handleSubmit}>
        <input
        type="text"
        value={trackNo}
        onChange={ event => setTrackNo(event.target.value)}
        placeholder="Enter a Tracking Number"
        required
        />
        <button type="submit">Search</button>
      </form>
    </div>
  )
}

function SearchResult( props ){
  return (
    <div className="SearchResult">
      <b>Tracking Number: { props.trackingNum }</b>
    </div>
  )
}

Answer 1

您已經在handleSubmit中聲明了一個 React 元素，但沒有在任何地方使用它，所以它什么都不做。 出於類似的原因：

function handleSubmit( event ) {
    event.preventDefault();
    4;
}

不會導致4做任何事情。 這是一個未使用的表達式。 （考慮一個 linter。 ）

添加另一個 state，確定是否顯示<form>或是否顯示<SearchResult> ，並在提交處理程序中更改 state。

如果所有功能都在這個組件中，它看起來像：

const [resultsTrackNo, setResultsTrackNo] = useState(-1);
function handleSubmit( event ) {
    event.preventDefault();
    setResultsTrackNo(Number(trackNo));
    setTrackNo('');
}
return resultsTrackNo === -1
  ? (
    <div className="SearchBar">
      ...
    </div>
  )
  : <SearchResult trackingNum={resultsTrackNo}/>;

如果曲目編號是數字，您可以考慮將<input type="text"更改為<input type="number"並使用.valueAsNumber而不是.value 。

您還可以將 state 放入父級，並讓父級根據resultsTrackNo是否為 -1 有條件地呈現此SearchForm （如果不是，則呈現SearchResult ）

如果它適合你的目的，你也可以讓額外的 state 只是一個 boolean 標志，並且只使用trackNo state。（如果你是 go 這條路線，你不想在提交時重置 state; setTrackNo('');行將被刪除。）