0

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

React Dev Tools Screenshot HTML Element Inspector Screenshot

lukas
  • 574
  • 1
  • 4
  • 19

2 Answers2

0

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?

lukas
  • 574
  • 1
  • 4
  • 19
-1

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. enter image description here

Lee
  • 5,305
  • 1
  • 6
  • 12
  • The problem is I can't update the field because as soon as I change 'defaultValue' to 'value', the field becomes read only. I tried the alert test using the 'defaultValue' property and it worked fine. – lukas Feb 08 '18 at 08:59
  • Why you don't create a variable/property to monitor the value change? The state[state: Readonly;] seems read only, F12 to check. – Lee Feb 08 '18 at 10:00