当输入字段是React js中的焦点时如何更改标签颜色

Question

could you please tell me how to change label color when the input field is focused in react js I am using semantic UI

https://react.semantic-ui.com/collections/form/#types-form here is my code

<Form>
    <Form.Field>
      <label>First Name</label>
      <input placeholder="First Name" />
    </Form.Field>
    <Form.Field>
      <Checkbox label="I agree to the Terms and Conditions" />
    </Form.Field>
    <Button type="submit">Submit</Button>
  </Form>

https://codesandbox.io/s/semantic-ui-react-example-i6crv

Answer 1

You can actually use :focus-within selector of CSS to easily apply CSS.

div:focus-within applies CSS when any element is focussed inside your div. In your case, you can give a class to your input group — let's say input-group . And then use .input-group:focus-within label selector to style your label.

Check out the working code sandbox demo of your code.

All I did is added the following stylesheet and it worked.

.input-group:focus-within label {
  color: red !important;
}

Answer 2

You can use react hooks (useState) to change color of the label:

Working Fork - https://codesandbox.io/s/semantic-ui-react-example-fwiz4

Just rewrite the component, include useState, and then use onFocus event inside the input field. Once it is focused, state hook will modify the focused state to true, which you can use to apply custom style or class. If you have more field, just add more state params, instead of one (focused in this example).

import React, {useState} from "react";
import { Button, Checkbox, Form } from "semantic-ui-react";

const FormExampleForm = () => {
  const [focused, setFocused] = useState(false); // set false as initial value

  return(
    <Form>
      <Form.Field>
        <label style={{color: focused ? 'red' : ''}}>First Name</label>
        <input placeholder="First Name" onFocus={() => setFocused(true)} />
      </Form.Field>
      <Form.Field>
        <Checkbox label="I agree to the Terms and Conditions" />
      </Form.Field>
      <Button type="submit">Submit</Button>
    </Form>
  );
}

export default FormExampleForm;