更改所有出现的字符 javascript/reactjs 的颜色答案

【问题标题】：Change color of all occurrences of a character javascript/reactjs更改所有出现的字符 javascript/reactjs 的颜色
【发布时间】：2019-06-19 09:55:41
【问题描述】：

我正在使用 reactjs 有一个包含多个输入字段的表单，其中一些带有带有星号的标签，表示该字段是强制性的。我想将所有星号（*）的颜色更改为红色，以便更好地为用户提供可见性。如何立即将表单中所有出现的星号的颜色更改为红色？

PS：我不想将星号放在跨度或 div 中。相反，我想编写代码，以便表单中的每个星号都使用单个全局代码变为红色。

【问题讨论】：

尝试添加一些代码，它会帮助人们更好地指导你。
将星号放在单独的 div/span 中并添加一个使文本颜色变为红色的类...您尝试过这样的事情吗？
集成这个有什么运气吗？

标签： javascript html css reactjs

【解决方案1】：

您应该将星号包装在 span 元素中并分配一些类。因此，您可以在 css 文件中为该类元素赋予颜色。

这样

<span class="required">*</span>

在 CSS 中

.required
{
   color:red;
}

【讨论】：

我不想将星号放在 span 或 div 中。相反，我想编写代码，使表单中的每个星号都通过单个全局代码变为红色。

【解决方案2】：

在没有任何代码可参考的情况下，您究竟想要完成什么，这是相当不清楚的。但我假设您实际上试图突出显示属于在表单提交期间为空的字段标签的星号 (*)。

试试这样的：https://codesandbox.io/s/holy-leftpad-hw1oe

class App extends React.Component {
  state = {
    name: "",
    password: "",
    errors: false
  };

  handleOnChange = event => {
    this.setState({
      [event.target.name]: event.target.value
    });
  };

  handleOnSubmit = event => {
    event.preventDefault();
    const { name, password } = this.state;
    if (name.length === 0 || password.length === 0) {
      this.setState({
        errors: true
      });
    } else {
      this.setState({
        errors: false
      });
    }
  };

  render() {
    const { name, password, errors } = this.state;
    return (
      <form onSubmit={this.handleOnSubmit}>
        <label>
          Name{" "}
          <span
            className={errors && name.length === 0 ? "error-label" : "label"}
          >
            (*)
          </span>
        </label>
        <input name="name" onChange={this.handleOnChange} />
        <label>
          Password
          <span
            className={
              errors && password.length === 0 ? "error-label" : "label"
            }
          >
            (*)
          </span>
        </label>
        <input name="password" onChange={this.handleOnChange} />
        <button type="submit">Submit</button>
      </form>
    );
  }
}

【讨论】：