Semantic UI React: как условно установить Form.Input для readOnly

Question

Я хочу условно установить Form.Input в зависимости от selectedProfile, если оно не равно нулю, оно установит вход как 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, вот документы семантического интерфейса реагирования об этом.

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

Ваш код недействителен. Компонент ожидает 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>
}

Answer 3

Вы должны написать это так, если значение 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>