Question

如何以React方式操作DOM？

假设我有一些组件，并用它来检查输入类型的子代是否为空：我该怎么做？

请记住，组件的子代是可变的，这就是为什么我无法手动为其分配引用。

function MyComponent({ children }) {
  return <div className="my-component">{children}</div>;
}

...

return (
  <MyComponent>
    <input name="name" type="text" />
    <input name="phone" type="text" />
    <button type="submit">OK</button>
  </MyComponent>
);

Answer 1

您也许可以在每个对象上克隆并注入一个处理程序，以保持有关输入是否包含文本或新值是否为空的信息，这只是一个看起来可能很粗糙的例子：< / p>

function MyComponent({ children }) {
  let seen = {};
  function generalHandler(ev) { 
      console.log(ev.target.getAttribute('key'))
      let key = ev.target.getAttribute('key');
      seen[key] = true;
      ev.target.value ? del seen[key] : false;
  };
  this.state = { updatedChildren: React.Children.map(children, (child, key) => {
      return React.cloneElement(child, {"key": key,
                                        "className": "my-component", 
                                        "onKeyUp": generalHandler})
      })
  }
  function updateTheChildState() { 
       // do some state changes
       this.setState({updatedChildren}); 
  }
  render() {
      return (
              <div className="my-component">this.state.updatedChildren</div>;
             )
  }
}

如何使用ReactJs操纵组件的子级？

1 个答案: