外部组件传入的props赋给value时，未自动解析到UI上

[GodVoid]

<Cron
value={this.props.cron}
......
外部传入props直接渲染时，getValue默认是* * * * * ? *，外部传入的cron未自动解析
而且使用hooks，useState获取getCronFns内部方法时，依然会一直重复渲染

[web-iseeu]

这个有解决吗？

[GodVoid]

hooks还没解决，我直接用ref获取了
`
getCronFns={(fns: any) => {
// console.log('getValue:', fns.getValue());

    // 获取值方法
    // fns.getValue: () => string
    // 解析Cron表达式到UI 调用该方法才可以重新渲染 【一般不使用】(value值改变后组件会自动更新渲染)
    // fns.onParse: () => Promise().then(()=>void).catch(()=>()=>void),
    cronRef.current = fns;
  }}
  // 自定义底部按钮后需要自行调用方法来或者值
  // After customizing the bottom button, you need to call the method or value
  footer={[
    <Row style={{ width: '100%' }} key={'cron'}>
      <Col
        style={{ textAlign: 'center', lineHeight: '32px', fontSize: 16, fontWeight: 600 }}
        span={5}
      >
        Cron表达式：
      </Col>
      <Col span={15}>
        <Input
          value={cron}
          // onChange={(e) => {
          //   setCron(e.target.value);
          // }}
        />
      </Col>
      <Col offset={1} span={1}>
        <Button
          key={'create'}
          type="primary"
          onClick={() => {
            console.log(cronRef?.current?.getValue());
            setCron(cronRef?.current?.getValue());
          }}
        >
          生成
        </Button>
      </Col>
    </Row>,
  ]}

`

[wangzongming]

这个有解决吗？

我没太明白哪块有问题，能细说明一下吗？ @OliverDaDa @GodVoid

[GodVoid]

之前尝试用状态调用getCronFns里面的getValue方法来获取cron，然后就会出现一直重复渲染的情况
getCronFns={(fns: any) => { setCron(fns.getValue()) }}

[wangzongming]

之前尝试用状态调用getCronFns里面的getValue方法来获取cron，然后就会出现一直重复渲染的情况 getCronFns={(fns: any) => { setCron(fns.getValue()) }}

这写法会无限循环。
不能每次都去改变页面中的状态，改变状态前可以加个判断：
fns.getValue() ！== cronValue && setCron(fns.getValue())

[web-iseeu]

我是这样使用的：

import Cron from "qnn-react-cron";
import { Form, Input, Button } from "antd"
import { useState } from "react";

const CronIndex = () => {
  const [cronRef, setCronRef] = useState()
  // let cronRef
  const [ form ] = Form.useForm()
  const { getFieldValue, setFieldsValue } = form

  return <Form form={form}>
    <Form.Item label="任务周期" name="cronValue">
      <Input addonAfter={( 
        <Button
            type='primary'
            style={{ margin: '-1px -12px', border: 'none' }}
            onClick={() => setFieldsValue({ cronValue: cronRef.getValue() })}>生成</Button>
      )}/>
    </Form.Item>
    <Cron
      value={() => getFieldValue('cronValue')}
      // getCronFns={fns => cronRef = fns}
      getCronFns={setCronRef}
      footer={[]}
    />
  </Form>
}

export default CronIndex

循环发生在 getCronFns 内部，使用 ref 形式在 input 框里修改并不能自动解析到UI（这个demo里不行，但是项目里可以。。。）

[wangzongming]

() => getFieldValue('cronValue')}

这段代码中 value 设置为一个函数，但是 Cron 的 value 只能设置为字符串。

[web-iseeu]

不这样的话 getFieldValue 执行太早，会报错：Instance created by useForm is not connected to any Form element. Forget to pass form prop?

[wangzongming]

不这样的话 getFieldValue 执行太早，会报错：Instance created by useForm is not connected to any Form element. Forget to pass form prop?

用 antd 的 Form 的话建议的写法如下：
1、使用 Form.Item 包裹一个组件，
2、在组件内部可以拿到一个 value 和 onChange 形参（ Form.Item 提供的）
3、将 value 值给到 Corn 组件的 value
4、在点击用户选择完毕的保存时 onChange(cronRef.getValue());

[web-iseeu]

不这样的话 getFieldValue 执行太早，会报错：Instance created by useForm is not connected to any Form element. Forget to pass form prop?

用 antd 的 Form 的话建议的写法如下： 1、使用 Form.Item 包裹一个组件， 2、在组件内部可以拿到一个 value 和 onChange 形参（ Form.Item 提供的） 3、将 value 值给到 Corn 组件的 value 4、在点击用户选择完毕的保存时 onChange(cronRef.getValue());

组件单独嵌套 Form.Item, 去掉 value 属性（可能有隐式传递？），并与 Input 共用一个 name，报错消失，且功能好用了：

<Form.Item name="cronValue">
  <Cron getCronFns={fns => cronRef = fns} footer={[]} />
</Form.Item>

[wangzongming]

这就是创建一个 react 可控组件的思路。本组件实现可控组件推荐方案：

const Test = ({value, onChange})=>{
// onChange 在合适时候调用即可
 return  <Cron value={value} getCronFns={fns => cronRef = fns} footer={[]} /> 
}
<Form.Item name="cronValue">
  <Test />
</Form.Item>

[web-iseeu]

这就是创建一个 react 可控组件的思路。本组件实现可控组件推荐方案：

const Test = ({value, onChange})=>{
// onChange 在合适时候调用即可
 return  <Cron value={value} getCronFns={fns => cronRef = fns} footer={[]} /> 
}
<Form.Item name="cronValue">
  <Test />
</Form.Item>

感谢大佬指点迷津