Question

我有两个关于TextInput onChangeText如何工作的问题。

如何确定TextInput的哪个父组件应该处理状态更改？
该父组件如何调用onChangeText prop函数？

1.让我举一个快速的代码示例。假设我有一个类组件LoginForm使用功能子组件输入：

class LoginForm extends Component {
  state = { text: '' };

  render() {
    return (
      <Input
          value={this.state.text}
          onChangeText={text => this.setState({ text })}
          labelText={'Email:'}
      />
    );
  }
}

在这种情况下，我创建了一个带有子组件<TextInput>的功能组件Input，以便Input可重用。什么应该影响我选择<LoginForm>或<Input>应该是类组件监控状态？

2. <LoginForm>目前如何调用其setState功能？传递的道具是一个引用this的函数，它是如何在2层儿童中调用的？这种与父级的绑定是否发生在无限量的嵌套组件中？

Answer 1

如果您使功能组件可重复使用，那么最好让您的父母处理文本更改。例如，如果您的文本输入处理它的文本更改它自己的状态，那么每次您的表单需要提交从TextInput获取值所需的值，更不用说它并不意味着真正的可重用性，因为你不能t在需求发生变化时调整功能，加上父级状态下的TextInput值允许在用户输入时进行验证，并且由于状态更改将在父级中调用render，您可以将值传递给组件

当你将函数作为prop传递给函数组件时，你将它绑定在父元素中，所以当文本输入调用函数'this'时，指的是父实例，调用set state会影响父元素的状态。

比我预期的要长一点，但我希望能回答你的问题。

理解反应本机TextInput状态

1 个答案: