Реагируйте с помощью семантического пользовательского интерфейса, динамически добавляйте реквизиты

Semantic-UI имеет этот компонент React, Segment, который я занимательный.

В моем приложении я использую onMouseOver с сегментом, например:

render() {
    return (
      <Segment onMouseOver={this.handleHover} />
    );
  }

Я хочу, чтобы handleHover () динамически добавлял семантические свойства пользовательского интерфейса в сегмент при наведении курсора мыши. Я пробовал сделать это с помощью элемента реакции клонирования < / a> и добавление нового свойства цвета в соответствии с документами Semantic UI.

Состояние документации React:

Клонируйте и возвращайте новый элемент React, используя element в качестве отправной точки. Результирующий элемент будет иметь исходные реквизиты элемента с неглубоко объединенными новыми реквизитами.

handleHover() {
    React.cloneElement(Segment, {
      color: "teal"                  //NEWLY ADDED
    });

    //THIS EXECUTES SO EVENT IS TRIGGERING.
    console.log("I'm in here");
  }

Таким образом, даже после клонирования компонента React он по-прежнему не показывает новый атрибут цвета, когда я наводю курсор на сегмент.

Вопрос: Это правильный подход к динамическому добавлению реквизита? Если да, то почему не отображается новый добавленный цвет? Если нет, то как мне изменить свой код?


reactjs javascript semantic-ui-react semantic-ui
person Phillip    schedule 21.08.2017    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Вы можете добавить любое значение prop к состоянию вашего текущего компонента и изменить это значение onMouseOver:

constructor(props) {
  super(props);

  this.state = {
    propValue: undefined
  }
  this.handleHover = this.handleHover.bind(this);
}

handleHover(event) {
  this.setState({propValue: 'hover'});
}

render() {
  return (
    <Segment onMouseOver={this.handleHover} propName={this.state.propValue} />
  );
}

Значение this.state.propValue изменится с undefined на hover, и компонент Segment получит эту новую опору при вызове обратного вызова onMouseOver.

Вы можете изменить propName на color и this.state.propValue на 'teal' на основе вашего примера.

person Dekel    schedule 21.08.2017
comment
Я получаю эту ошибку: Предупреждение: Неизвестная опора propValue в теге ‹div›. Удалите эту опору из элемента. - person Phillip; 22.08.2017
comment
Вы должны использовать свойства, которые Segment разрешают :) - person Dekel; 22.08.2017
comment
Прочтите последнюю заметку в моем ответе - person Dekel; 22.08.2017
comment
хм не уверен, что делаю не так. Ниже приведены два фрагмента кода. - person Phillip; 22.08.2017
comment
handleHover (событие) {this.setState ({propValue: color}); } - person Phillip; 22.08.2017
comment
‹Сегмент onMouseOver = {this.handleHover} propValue = бирюзовый› - person Phillip; 22.08.2017
comment
propValue должна быть опорой, которая Segment разрешена. Полный список находится по ссылке в вашем вопросе. Вы должны использовать один из них (например: color / size / textAlign) - person Dekel; 22.08.2017
comment
Круто, это работает :), очень элегантный ответ по сравнению с клонированием всего элемента. Большое спасибо! - person Phillip; 22.08.2017