Captcha auto-change on input

Question

I'm working on a form with captcha using reactjs and antdesign, My problem is when I type on other fields, the captcha code change.

Hope you understand me..

Thanks

codesandbox

<FormItem>
    <Input
    prefix={<Icon type="key" style={{ color: "rgba(0,0,0,.25)" }} />}
    type="captcha"
    placeholder="captcha"
    addonAfter={<Captcha />}
    />
</FormItem>

Answer 1

In ReactJS: re-rendering can be disabled via shouldComponentUpdate(), by returning false.

See below for a practical example.

See this fork of your CodeSandbox for a working solution.

// Captcha.
class Captcha extends Component {

  // Render.
  render = () => (
    <div className="Captcha">
      <NumberList />
    </div>
  )

  // Should Component Update.
  shouldComponentUpdate = () => false

}