反应：我表单的 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('');行将被删除。）