反应：我的表单的onSubmit处理程序中的函数无法正常工作

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行做任何事情。这是一个未使用的表达式。(考虑一个过滤器)

添加另一个状态，决定是否显示<form>，或者是否显示<SearchResult>，并在提交处理程序中更改该状态。

如果所有的功能都在这个组件中，它看起来像:

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。

您还可以将状态放入父级，并让父级根据resultsTrackNo是否为-1有条件地呈现此SearchForm(如果不是，则呈现SearchResult)

如果符合您的目的，您也可以将附加状态设置为一个布尔标志，并且只使用trackNo状态。(如果你要走这条路，你不会希望在提交时重置状态;setTrackNo('');行将被删除。)