当formData作为prop传递给表单时，带有输入的自定义窗口小部件会在react-jsonschema-form中失去焦点

Question

I have a form made using react-jsonschema-form and I maintain a state for formData and pass it as a prop to the form along with an onChange event. I need to maintain this formData state and pass as prop because I have other states as well which when setState re-render the form and the form fields reset. I have a custom widget with an input box in this form. Below is my sample code. Problem - For every character I type in the input box, the custom widget gets re-rendered and the input box loses focus.
https://jsfiddle.net/niteenautade/fce9x2ny/

import React, { Component } from 'react';
import Form from "react-jsonschema-form";

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      formData : {}
    }
    this.getSchema = this.getSchema.bind(this)
    this.getUiSchema = this.getUiSchema.bind(this)
  }
  render() {
    var schema = this.getSchema()
    var uiSchema = this.getUiSchema()

    return (
      <div className="App">
        <div>
          <Form schema={schema}
          uiSchema={uiSchema}
          onChange={(e)=>{this.setState({formData:e.formData})}}
          formData={this.state.formData}
          onSubmit={(data)=>{ console.log(data)  }}
          />
        </div>
      </div>
    );
  }
  getSchema = () => {
    const schema = {
      title: "Test Form",
      type: "object",
      properties: {
        firstname: {
          type: "string",
          title: "firstname"
        },
      }
    };
    return schema
  }
  getUiSchema = () => {
    const uiSchema = {
      firstname : {
        "ui:widget": (props) => {
          return (
            <div>
              <input type="text"
                value={props.value}
                required={props.required}
                onChange={(event) => props.onChange(event.target.value)} />
            </div>
          );
      }
      }
    };
    return uiSchema
  }
}

export default App;

Answer 1

If you want to track form changes, you can handle it without settingState on every change, instead you can setState on Submit. If you want to pass formData programmatically you can use something as following:

this.state = {
  formData : {
    firstname:'Test first name'
  }
}

Following code works as you expect: ( https://jsfiddle.net/tpjL2z06/ )

const Form = JSONSchemaForm.default;
const schema = {
      title: "Test Form",
      type: "object",
      properties: {
        firstname: {
          type: "string",
          title: "firstname"
        },
      }
};

const uiSchema = {
  firstname : {
    "ui:widget": (props) => {
      return (
        <div>
          <input type="text"
            value={props.value}
            required={props.required}
            onChange={(event) => props.onChange(event.target.value)} />
        </div>
      );
    }
  }
};

class App extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      formData : {}
    }
  }

  render() {
    return (
      <div className="App">
        <div>
          <Form 
          schema={schema}
          uiSchema={uiSchema}
          formData={this.state.formData}
          onSubmit={(data)=>{ console.log(data)  }}
          />
        </div>
      </div>
    );
  }

}

ReactDOM.render(<App />, document.querySelector("#app"))