Question

我正在使用reactjs的表单具有多个输入字段，其中一些带有带有星号的标签以指示该字段是必填字段。我想将所有星号（*）的颜色更改为红色，以更好地显示给用户。如何将表格中所有出现的星号的颜色立即更改为红色？

PS：我不想将星号放在跨度或div中。而是我想编写代码，以便表单中的每个星号都可以通过单个全局代码获得红色。

Answer 1

您应该将星号包裹在span元素中并分配一些类。因此，您可以在CSS文件中为该类元素添加颜色。

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

在CSS中

.required
{
   color:red;
}

Answer 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>
    );
  }
}

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

2 个答案: