const [value, setValue] = React.useState(prediction); return ( <> <input type="number" value={value} onChange={(e) => e.target.checkValidity() ? setValue(e.target.valueAsNumber) : undefined } /> <button type="button" children={"predict"} onClick={() => setPrediction?.(value)} /> // 入力欄 import * as React from "react"; type Props = { prediction: number; onSubmit?: (prediction: number) => void; max?: number; min?: number; }; export const Guess = ({ prediction, onSubmit: setPrediction, max, min }: Props) => { const [value, setValue] = React.useState(prediction); return ( <> <input type="number" value={value} max={max} min={min} placeholder={`from ${min} to ${max}`} onChange={(e) => e.target.checkValidity() ? setValue(e.target.valueAsNumber) : undefined } /> <button type="button" children={"predict"} onClick={() => setPrediction?.(value)} /> </> ); };