Question

我正在测试/学习反应并解决问题。

简化案例：

＆＃13;

class Parent extends Component {
    constructor(props) {...}
    render() {
      return (
        <MyInputs onChange={this.handleChange}>
        <Child onChange={this.handleChange}/>
      )
    }
    
    handleChange() {
        //logic
        processTextAreaText();
    }
} 

class Child extends Component (props) {
  constructor(props) {...}
  render() {
    return (
      <textarea onChange={this.handleChange}"/>
    )
  }
  
  handleChange(event) {
    this.props.handleChange(event.target.value);
  }
}

＆＃13;

Dom结构：亲输入输入儿童按钮

我有两个输入，一个子元素是textarea和一个按钮。用户在输入，textarea中键入内容并单击按钮。

我当前的想法/解决方案：在TextArea中的每次更改时，我都调用父changeHandler并将值保存在父状态中。

我的问题：这是最佳方式吗？我可以在点击按钮时获取值，并直接处理它吗？如果单击按钮，如何从Child元素中获取值？

编辑：到目前为止，我已阅读官方reactjs doc Uncontrolled Components

如果你想要快速和肮脏，它也可以稍微减少代码。否则，您通常应该使用受控组件。

但我仍然不明白为什么不受控制的组件变脏？在我想要从texarea获得价值的情况下，那时我想要处理它而不是在它发生变化时。每次在textarea中的值变化都不必要时，是否在受控组件中保存/更新状态？

我已经阅读了这个article，它在reactjs doc中被引用，实际上当我们只需要知道元素的值时，使用不受控制的组件并不坏。

但我仍然不明白为什么reactjs不推荐它？最好的，

Answer 1

是react way（controlled）。我已经阅读了反应开发者的某些评论，但现在找不到，可能是某人发帖链接。它看起来效率不高，但它在客户端上运行，每次更改都在内存中执行的数据复制并不多。大文本不是1Mb或更多。它会在每个按键上复制。实际的计算机并不是那么多。

当然，您也可以获得ref的DOM元素（uncontrolled），并在putton press事件中从中获取数据，而不对每次更改执行复制。效率更高。

ref使用示例：

handleButton = () => {
  console.log(this.refs.textarea.value);
}
render() {
  return (
    <span>
      <textarea ref='textarea'/>
      <button onClick={this.handleButton}/>
    </span>
  )
}

也许这个术语＆＃34;脏＆＃34;混淆。这意味着每次状态都不是实际状态，数据提取是由用户代码执行而不是反应。两种方法都有其优点。选择最适合你的。

在reactjs [控制与非受控组件]中的父元素和子元素之间传递数据的有效方法

1 个答案: