ReactでEnterキーが押された時の挙動を指定する

やりたいこと

• このようなテキストボックスに文字をいれて、Enterキーを押したときにDEPLOYボタンをクリックしたときと同じ動作になるようにしたい
• DEPLOYボタンが押された際には、handleClickStartが呼ばれる

コード

• formにonSubmitを指定して、サブミットが走った時の動作をhandleSubmitで指定する
  • handleSubmitが呼ばれた時に、handleClickStartを呼ぶようにする
  • event.preventDefault();はsubmit処理の規定の動作を防ぐもので、これがない場合、画面描画などの一般的な処理がこのタイミングで走る
  • handleClickStart(values)のように指定できるのは（引数としてvalues与をえなくていい）、valuesはグローバル変数というかこの関数内で使える変数になっているから
• onClickを指定すると、2重で呼ばれることになる
  • それは、明示的に指定しているonClickの動作とsubmitの動作での２回分

  const handleSubmit = (event) => {
    handleClickStart(values)
    event.preventDefault();
  };

  return (
    <React.Fragment>
      <Title>Today</Title>
      <form className={classes.root} noValidate autoComplete="off" onSubmit={handleSubmit}>
        <TextField
          id="standard-basic"
          label="Standard"
          onChange={handleChange}
          value={values}
        />
        <ResponsiveContainer>
          <Button
            type="submit"
            variant="contained"
            color="primary"
          // onClick={() => {
          //   handleClickStart(values);
          // }}
          >
            Deploy
        </Button>
        </ResponsiveContainer>
      </form>
    </React.Fragment >
  );

参考