React antd defaultValueが適応されない。

Question

antdライブラリのInputコンポーネントを使っています。
初期値に３を入れているのですが初期値の３が表示されません。
<Form.Item>のname="input"を消すと初期値が表示されるようになるのですが10文字以上入力した時のエラ〜メッセージが表示されなくなりました。
解決方法わかる人いましたらご教授お願いしたいです。

code

const App = () => {
  const [value, setValue] = React.useState(null);
  const [onSave, setOnSave] = React.useState(null);
  const handleInputChange = React.useCallback((e) => {
    setValue(Number(e.target.value));
  }, []);

  const onSaveBlur = React.useCallback(() => {
    if (String(value).length < 10) {
      setOnSave(true);
    } else {
      setOnSave(false);
    }
  }, [value]);

  useEffect(() => {
    if (value === null) {
      setValue(3);
    }
  }, [value]);
  console.log(value);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Form>
        <Form.Item
          name="input"
          rules={[
            { max: 10, message: "length should be less then 10 letters!" }
          ]}
        >
          <Input
            type="number"
            value={value}
            onChange={handleInputChange}
            onBlur={onSaveBlur}
          ></Input>
        </Form.Item>
      </Form>
    </div>
  );
};

export default App;

reactjs

Answer 1

valueとdefaultValueは共存できません。defaultValueを指定するのではなく、valueに初期値を設定する、という方法で対応しましょう。

Comments

[maisumakun]

const [value, setValue] = React.useState(3);

[cuku]

defaultValueを消しましたが変わりませんでした。　https://codesandbox.io/s/adoring-tree-xe4xm?file=/src/App.js

[cuku]

またuseEffectで初期値を設定してあげるようにしたいです。

[maisumakun]

> またuseEffectで初期値を設定してあげるようにしたいです。

useStateに書くのでは何が不満なのでしょうか？

[cuku]

登録したデータがある場合はデータから取得してきた数字をuseEffectで設定してあげる形にしたいのでuseEffectにしたいです。

[maisumakun]

すみません、Form.Item内にあるコンポーネントの値は、Form.Item側で制御しなければいけないようです。

https://ant.design/components/form/#Form.Item

[cuku]

ありがとうございます。
僕もそれをみたのですがどれで制御したらいいかわからず、、、
結局できませんでした

[maisumakun]

Reactの常識が通用しなくて、逆に使いづらい印象ですね…

[cuku]

サンプル見てみてもよく理解できず、、、