React Bootstrap中的FormControl内只读输入

Question

我正在使用React Bootstrap，这个框架提供了一些不错的FormControls。

但是我想让生成的Input字段在FormControls中具有"readonly"属性。这样，这个字段看起来和我的其他FormControls一样，但在IOS上不会弹出键盘输入。

在我的情况下，输入将由一个日历选择器提供，这个选择器将由Popover触发。

有人知道如何给FormControl传递参数readonly="readonly"，以便在浏览器中生成的Input字段具有readonly="readonly"属性吗？

感谢大家的回答！

- user3611459

---

你目前尝试了什么？请[编辑]你的问题，展示你遇到问题的代码的[minimal, complete, verifiable example]，这样我们才能帮助你解决具体的问题。同时，你也应该阅读[ask]。 - Toby Speight

Answer 1

看起来不是react-bootstrap的问题，而是react本身的问题。React没有将'readonly'属性传递给生成的（真实的）DOM元素：

React-bootstrap创建以下react虚拟dom输入：

然而，React生成了以下省略readonly属性的真实DOM元素：

也许在您的情况下使用'disabled'会有所帮助：

<FormControl
   disabled
   type="text"
   placeholder="Enter text"
   onChange={this.handleChange}
 />

关于readonly和disabled的区别，请参见此处：https://dev59.com/mGsz5IYBdhLWcg3wrJ6-#7730719

我在React的GitHub存储库中创建了一个问题：#6783

---

更新

在上述问题中得到答案后，您需要采用驼峰命名法：readOnly。

因此应该是：

<FormControl
   readOnly
   type="text"
   placeholder="Enter text"
   onChange={this.handleChange}
 />

- omerts

---

它只能在某些情况下进行只读操作，因此在不是这种情况下，您需要处理更改。 - omerts

@omerts 但是你的回答方式，它会在所有情况下都是只读的吗？ - joedotnot

@joedotnot 你可以使用它来设置：readOnly={false} || readOnly={true}。 - omerts

@omerts。没有readOnly=true/false这样的东西；如果它存在，就默认为只读！你可以使用readOnly="whatevs"、readonly="true"、readOnly="false"，它们都表示同一件事情。 - joedotnot

@joedotnot，它可以工作，请仔细查看我写的方式，我正在使用{false}，而不是'false'。请在此处查看：https://jsfiddle.net/omerts/b5q8axhn/ - omerts

@omerts 是的，你是100%正确的，它能够正常工作！现在我和其他人都必须记住这一点。 "false"和{false}的行为是不同的 - 这完全出乎意料（而且我认为库允许这种行为是不好的）。 - joedotnot

Answer 2

根据值，此属性将为readOnly={!!value}，以使输入字段无法编辑

class Input extends React.Component {
  render () {
    const { defaultValue, value, onChange } = this.props
    const nothing = () => {}
    
    return (
      <input
        type='text'
        defaultValue={defaultValue}
        value={value ? value.toUpperCase() : undefined}
        readOnly={!!value}
        onChange={value ? nothing : onChange}
       />
    )
  }
}

class App extends React.Component {
  constructor () {
    super ()
    
    this.state = {
      value: 'arr'
    }
  }
  
  handleChange (e) {
    const { target: { value }} = event
    this.setState({ value })
  }
  
  render () {
    const { value } = this.state
 
    return (
      <div>
        <Input 
          onChange={this.handleChange.bind(this)}
          defaultValue={'patata'}
          />
        <Input 
          value={value}
          />
     </div>
    )
  }  
}

ReactDOM.render(<App />, document.getElementById('arr'))

- Sandeep Jain

Answer 3

老问题，新方法：利用onChange事件来控制是否调用handleChange事件。我通过按钮定义editForm作为props值进行控制，以查看或编辑模式。

例子：

<TextField
        name="id"
        label="ID
        value={entityState.entity.Id || ""}
        onChange={(a) => (props.formEdit ? handleChange(a) : "")}
/>

- Edu Garcia