React的表单和表单组件

非受控组件 和 受控组件

非受控组件，值随着输入而变化，但不受上层控制。不能设置value，会导致无法修改值。

import React, { useRef } from '@alipay/bigfish/react';
export default () => {
  const inputRef = useRef(null);
  return (
    <div className="home-page">
      <input ref={inputRef} />
      <button onClick={() => {
        console.log('inputRef.current.value', inputRef.current.value);
      }}>Print</button>
    </div>
  );
};

受控组件，初始值通过上层传递，输入内容会同步给上层，上层再将值传递给组件。zaizai值随着输入而变化，但不受上层控制。value的设置 和 onChange中修改value缺一不可。

import React, { useRef, useState } from '@alipay/bigfish/react';
export default () => {
  const inputRef = useRef(null);
  const [text, setText] = useState('hello');
  return (
    <div className="home-page">
      <input value={text} ref={inputRef} onChange={e=> setText(e.target.value) }/>
    </div>
  );
};

React中的表单中自定义组件

以 antd-mobile 为例子：

• 在表单中自定义组件需要使用 props.value 的值 和 通过props.onChange来传递值。
• 使用上，我们通过 form.setFieldsValue设置、通过form.getFieldsValue获取。
• 具体 Form.Item 怎么和 value 和 props.onChange打交道，可以再深入一些。

<Form.Item noStyle name="topicId">
    <TopicSelector />
</Form.Item>

import React from '@alipay/bigfish/react';
import { useModel } from '@alipay/bigfish';
import { Space, Tag } from 'antd-mobile/2x';
export default (props) => {
  const { initialState } = useModel('@@initialState');
  return (
    <Space align="start" wrap={true} style={{ '--gap': '0.16rem' }}>
      {initialState?.topicList.map((d) => {
        return (
          <span key={d.id} onClick={() => props.onChange(d.id)}>
            {props.value === d.id ? (
              <Tag
                color="primary"
                style={{ backgroundColor: 'rgba(25, 137, 250, 0.1)' }}
                fill="outline"
              >
                {d.name}
              </Tag>
            ) : (
              <Tag color="default" fill="outline">
                {d.name}
              </Tag>
            )}
          </span>
        );
      })}
    </Space>
  );
};