React Fabric TextField becomes read only after adding value property

Question

I have been trying to figure out how to handle value changes in React Fabric TextFields. The problem is every time I set the value property, the component becomes read only. If is use the defaultValue property, everything works fine, apart from the fact I need this input to be controlled. I am using React Fabric inside a SharePoint Framework solution.

What I currently have is this:

  ...

  this.state = {
    title: ''
  }

  this.handleInputChange = this.handleInputChange.bind(this);
}

public handleInputChange(id, value) {
  this.setState({
    [id]: value
  });
}

public render(): React.ReactElement<IQuoteAppProps> {
  return (
    <TextField
      label='Title'
      onChanged={(value) => this.handleInputChange('title', value)}
      value={this.state.title}
      required
     />
   )
}

Does anyone know how to correctly set this up? I have included two screenshots as well.

Edit: I literally copied and pasted an example from the developer page mentioned below and it is still not working. The component on their website is working fine and can be edited. The only thing I now have in mind is whether React Fabric is not colliding with something inside SharePoint Framework.

Office UI Fabric TextField: https://developer.microsoft.com/en-us/fabric#/components/textfield

Answer 1

After creating a new SPFx project and testing it there, everything was working fine. I decided to delete the node_modules folder and run npm install to install all the packages from scratch. It magically started working.

Does anybody know what exactly could be causing this?

Answer 2

This should caused by your handleInputChange function, as you not update TextField vaule, you could insert a alert to this function and you would see the new key entered.