Ввод текста в встроенном стиле

Я использую React с material-ui, я хотел бы применить пользовательский css к тексту на входе, например:

<div style = {{display: 'flex'}}>
<strong color = "blue">{value[0]}</strong>
<strong color = "red">{value[1]}</strong>
</div>

Эффектно получается что-то вроде радуги.

Я играл с настройкой компонентов ввода, но не понял, как получить полный контроль над рендерингом символов из значения и одновременным их редактированием.

reactjs input material-ui

12.03.2019 13:47

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

267

Ответы 2

Вы можете преобразовать split свою строку value в массив символов, перебрать этот массив и визуализировать их отдельно с цветом по вашему выбору.

Пример

const colors = [];
while (colors.length < 100) {
  let color;
  do {
    color = Math.floor(Math.random() * 1000000 + 1);
  } while (colors.indexOf(color) >= 0);
  colors.push("#" + ("000000" + color.toString(16)).slice(-6));
}

class App extends React.Component {
  state = {
    value: "Foobar"
  };

  onChange = ({ target: { value } }) => {
    this.setState({ value });
  };

  render() {
    const { value } = this.state;

    return (
      <div>
        <input value = {value} onChange = {this.onChange} />
        {value.split("").map((char, index) => (
          <strong key = {index} style = {{ color: colors[index % colors.length] }}>
            {char}
          </strong>
        ))}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id = "root"></div>

проблема с его решением заключается в том, что я все еще вижу старое входное значение, в идеале я хочу, чтобы к той же области ввода применялся css.

— 12.03.2019 14:04

12.03.2019 13:56

Все, что вам нужно указать тег стиля вместо тега цвета, чтобы этого было легко достичь

На всякий случай, если свойство является динамическим, используйте $ для вставки динамического значения.

Например, style = {{color:’red’}} Для динамического стиля = {{color:${value}}}

12.03.2019 14:17