语义UI反应：如何有条件地将Form.Input设置为readOnly

Question

我想有条件地设置一个Form.Input取决于selectedProfile如果它不是null，它将输入设置为readOnly但如果没有那么它不会。这是我的代码，当然它没有用。如果它像readOnly = true那样会更容易，但事实并非如此

  render() {
  let readOnly = _.isNil(selectedProfile) ? "" : 'readOnly';

  return (
   <Form>
          <Form.Input
                fluid
                required
                label="First name"
                placeholder="Jose"
                name="firstName"
                value={ _.isNil(selectedProfile) ? this.state.firstName : selectedProfile.first_name }
                onChange={this.handleChange}
                {readOnly}
              />
   </Form>

有关readOnly，here's semantic ui react's docs的更多信息。

Answer 1

你必须真正提供真或假的道具。

render() {
  return (
      <Form>
          <Form.Input
                fluid
                required
                label="First name"
                placeholder="Jose"
                name="firstName"
                value={ _.isNil(selectedProfile) ? this.state.firstName : selectedProfile.first_name }
                onChange={this.handleChange}
                // with this you are really passing true or false
                readOnly={!_.isNil(selectedProfile)}
              />
      </Form>
  }

Answer 2

如果readOnly值来自变量，你必须这样写它：

render() {
  let readOnly = !_.isNil(selectedProfile);

  return (
   <Form>
          <Form.Input
                fluid
                required
                label="First name"
                placeholder="Jose"
                name="firstName"
                value={ _.isNil(selectedProfile) ? this.state.firstName : selectedProfile.first_name }
                onChange={this.handleChange}
                readOnly={readOnly}
              />
   </Form>

Answer 3

您的代码无效。一个组件期待property=value。在你的情况下，你只是把property。此外，readOnly需要一个布尔值，而不是一个字符串。更改您的代码如下：

render() {
  return (
   <Form>
     <Form.Input
       fluid
       required
       label="First name"
       placeholder="Jose"
       name="firstName"
       value={ _.isNil(selectedProfile) ? this.state.firstName : selectedProfile.first_name }
       onChange={this.handleChange}
       readOnly={!_.isNil(selectedProfile)}
     />
   </Form>
}