在 react 中跟踪 children prop 的值或事件变化

Question

所以我有一个以这种方式使用的组件。

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

而我在SBCAInput 组件中是这样实现的。

import React , {useState} from 'react'

function SBCAInput(props) {
    const [value, setValue] = useState("");
    return (
        <div className={`sbca-input mb-3 ${ value==="" ? "" : "input-not-empty"}`}>
            <label>Email address</label>
            {props.children}
        </div>
    )
}

export default SBCAInput

现在的挑战是我希望能够检测input 的值是否为空并更改SBCAInput 组件中div 容器上的类。

如何跟踪输入组件的值？

Answer 1

您可以使用children.props.value访问value：

父组件：

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

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

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

SBCAInput 组件：

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