繁体   English   中英

添加 value 属性后,React Fabric TextField 变为只读

[英]React Fabric TextField becomes read only after adding value property

我一直在试图弄清楚如何处理 React Fabric TextFields 中的值变化。 问题是每次设置value属性时,组件都会变为只读。 如果使用defaultValue属性,则一切正常,除了我需要控制此输入的事实。 我在 SharePoint 框架解决方案中使用 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 框架内的某些内容发生冲突。

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

React 开发工具截图 HTML 元素检查器屏幕截图

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

有谁知道究竟是什么导致了这种情况?

这应该是由您的 handleInputChange 函数引起的,因为您没有更新 TextField vaule,您可以向该函数插入警报,您会看到输入的新键。 在此处输入图片说明

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM