更改样式和属性 TextChange - React Native

Question

我刚刚开始使用 React Native，我试图弄清楚当两个输入文本的长度> 0 时如何禁用和启用可触摸的不透明度。

在我的可触摸不透明度上，我将其设置为 disabled={true}，并且它有一个设置了不透明度的儿童文本。当用户在文本输入中键入时，我想设置 disabled={false} 并将文本不透明度更改为 1。

What's the best way to do this in react native?     
Should i put ref's on them?
Should I use a className? 
setNativeProps maybe?

Answer 1

如果构造函数的状态包含"isDisabled"和"textOpacity"的标志，则可以在onChangeText函数中调用setState，该函数将更改isDisabled和textOpacity的状态。文本组件可以使用状态的文本不透明度，可触摸的不透明度可以使用状态的 isDisabled。

前任：

`class foo extends Component {
     constructor(props) {
         super(props);
         this.state = {
             isDisabled: true,
             textOpacity: 0.1,
             text1: '',
             text2: '',
         };
      onTextChange1(text) {
          if (text.length > 0 && this.state.text2.length > 0) {
              this.setState({isDisabled: false, textOpacity: 1, text1: text});
          }
          else {
              this.setState({isDisabled: true, textOpacity: 0.1, text1: text});
          }
      }
      onTextChange2(text) {
          if (text.length > 0 && this.state.text1.length > 0) {
              this.setState({isDisabled: false, textOpacity: 1, text2: text});
          }
          else {
              this.setState({isDisabled: true, textOpacity: 0.1, text2: text});
          }
      }
      render() {
          return (
              <View>
                  <TextInput onChangeText={(text) => this.onTextChange1(text)} value={this.state.text1}/>
                  <TextInput onChangeText={(text) => this.onTextChange2(text)} value={this.state.text2}/>
                  <TouchableOpacity disabled={this.state.isDisabled}>
                      <Text style={{opacity:this.state.textOpacity}}>Hello World!</Text>
                  </TouchableOpacity>
              </View>
          );
      }
}

我没有测试过上述内容，但我相信这基本上就是您要找的。我们在文本更改中执行检查以查看是否满足某个条件，并且根据是否满足，我们按照您所述更改子组件的参数。调用 setState 和修改 props 是触发重新渲染的唯一方法，所以这就是我们在 react-native 中使用重新渲染组件的方式。

Answer 2

如果您希望不透明度能够根据用户的移动而变化，则需要将其(不透明度(设置为父组件的状态。例如，您可以执行此操作：

export class Parent extends React.Component {
   constructor(props) { 
      super(props);
      this.state = { opacity: 0 }
   }
   render() {
      Some components ....
        <TextInput style={{opacity: this.state.opacity}} onChangeText={ () => this.setState({opacity: 1}) } ...other props here .../>
      Some components ....
   }
}

您还可以将其他样式应用于TextInput组件。