ReactJS:更改特定元素ID的输入字段边框颜色

import React, { useState } from 'react';

const InputField = () => {
  const [borderColor, setBorderColor] = useState(''); // 初始化边框颜色为空

  const handleInputChange = (event) => {
    const value = event.target.value;
    // 根据输入字段的值来设置边框颜色
    if (value === '') {
      setBorderColor('red'); // 输入字段为空时，设置边框颜色为红色
    } else {
      setBorderColor('green'); // 输入字段不为空时，设置边框颜色为绿色
    }
  };

  return (
    <div>
      <input
        type="text"
        id="inputField"
        style={{ borderColor: borderColor }} // 设置边框颜色
        onChange={handleInputChange} // 监听输入字段变化事件
      />
    </div>
  );
};

export default InputField;