Javascript 在react中跟踪子道具的值或事件更改

所以我有一个组件，我用这种方式

<SBCAInput>
  <input  defaultValue="" type="email" />
</SBCAInput>

现在的挑战是，我希望能够检测

输入

的值是否为空，并在

SBCAInput

组件中更改div容器上的类

---

如何跟踪输入组件的值？

您可以使用

子.props.value

访问

值

：

父组件：

const [email, setEmail] = useState('')

function handleChange(e) {
  setEmail(e.target.value)
}

<SBCAInput>
  <input type="email" value={email} onChange={handleChange}/>
</SBCAInput>

function SBCAInput({ children }) {
  return (
    <div
      className={`sbca-input mb-3 ${
        children.props.value ? 'input-not-empty' : ''
      }`}
    >
      <label>Email address</label>
      {children}
    </div>
  )
}

const[email，setEmail]=useState（“”）
功能手柄更改（e）{
setEmail（例如target.value）
}

SBCAInput组件：

const [email, setEmail] = useState('')

function handleChange(e) {
  setEmail(e.target.value)
}

<SBCAInput>
  <input type="email" value={email} onChange={handleChange}/>
</SBCAInput>

function SBCAInput({ children }) {
  return (
    <div
      className={`sbca-input mb-3 ${
        children.props.value ? 'input-not-empty' : ''
      }`}
    >
      <label>Email address</label>
      {children}
    </div>
  )
}

函数SBCAInput（{children}）{
返回(
电子邮件地址
{儿童}
)
}

IMO check

useRef

hook：如果有条件地设置类变得复杂，您可以使用。我明白了，您认为可以使用

useffect

只是为了确保，我去掉了

SBCAInput

组件中的value prop，我尝试了它，但它似乎不起作用，但我使用了这个，它似乎在我的`setValue（e.target.value）}中起作用……>`