React 无状态组件更新组件内的value值

React 无状态组件更新组件内的value值

---

在做项目中,使用无状态组件比较方便,而且可以快速渲染, 但是无状态组件有个缺陷, 父组件的数据更新了,但是子组件内不更新, 缺少效果.

解决办法, 在需要更新的Input 或者其他的antd组件中加入 key={isUpdate}

让父组件更新数据时同时更新isUpdate(add => add + 1) 就可以联动更新子组件的数据了

代码上输入框组件

const InputModel2 = ({ callback, item, isUpdate = 0}) => {
  const [error, setError] = useState('');
  function onChange(data) {
    setError('');
    if (!item.isNull && !data.target.value) {
      setError(item.title + "不能为空!");
      callback(item.var, data.target.value, true);
    }
    if (item.VerifyRegular && !new RegExp(item.VerifyRegular).test(data.target.value)) {
      setError(item.title + "填写错误!");
      callback(item.var, data.target.value, true);
    } else {
      callback(item.var, data.target.value.trim(), false);
    }
  }

  return (
    <Row>
      <Col span={10}>
        <label style={{ fontSize: 16, float: "right", paddingRight: 20 }}>{item.title}
          {
            item.tag ?
              <span style={{ color: 'red' }}>*</span>
              : null
          }
          :
          {
            item.desc ?
              <Tooltip title={item.desc} >
                <QuestionCircleOutlined style={{ paddingLeft: 10 }} />
              </Tooltip>
              : ''
          }
        </label>
      </Col>
      <Col span={14}>
        <Input key={isUpdate} placeholder={item.placeholder || ''} defaultValue={item.value || ''} onChange={onChange} style={{ width: 200 }} />
        {
          error ?
            <Col style={{ paddingLeft: 10 }}>
              <div style={{ color: "red" }}>{error}</div>
            </Col>
            : ''
        }
      </Col>
    </Row>
  )
}