添加值属性

时间:2018-02-07 17:36:05

标签: javascript reactjs typescript sharepoint-online spfx

我一直在试图弄清楚如何处理React Fabric TextFields中的值更改。问题是每次我设置属性时,该组件变为只读。如果使用 defaultValue 属性,一切正常,除了我需要控制此输入的事实。我在SharePoint Framework解决方案中使用React Fabric。

我现在拥有的是:

  ...

  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
     />
   )
}

有谁知道如何正确设置它?我也包括了两个截图。

编辑:我从下面提到的开发者页面中复制并粘贴了一个示例,但它仍然无效。他们网站上的组件工作正常,可以编辑。我现在唯一想到的是React Fabric是否与SharePoint Framework中的内容不发生冲突。

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

React Dev Tools Screenshot HTML Element Inspector Screenshot

2 个答案:

答案 0 :(得分:0)

创建一个新的SPFx项目并在那里测试后,一切正常。我决定删除 node_modules 文件夹并运行 npm install 从头开始安装所有软件包。它神奇地开始工作。

有人知道究竟是什么造成了这种情况吗?

答案 1 :(得分:-1)

这应该是由handleInputChange函数引起的,因为你没有更新TextField vaule, 您可以向此功能插入警报,您将看到输入的新密钥。 enter image description here