HarmonyOS鸿蒙Next中2个TextInput控件，当TextInput输入都有值时，改变Text的背景色

Demo供参考 

```javascript
[@Entry](/user/Entry)
[@Component](/user/Component)
struct TextInputDemo {
  [@State](/user/State) message: string = 'Hello World';
  [@State](/user/State) text1: string = ''
  [@State](/user/State) text2: string = ''
  [@State](/user/State) changeColoor : boolean=false
  controller: TextInputController = new TextInputController()

  build() {
    Column(){
      Text(this.message)
        .id('HelloWorld')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .backgroundColor(this.changeColoor ? Color.Red: '')

      TextInput({ text: this.text1, placeholder: 'input your word1...', controller: this.controller })
        .width('95%')
        .height(40)
        .margin(20)
        .onChange((value: string)=>{
          this.text1 = value
          if(this.text2 && this.text1){
            this.changeColoor = true
          }else{
            this.changeColoor = false
          }

        })

      TextInput({ text: this.text2, placeholder: 'input your word2...', controller: this.controller })
        .width('95%')
        .height(40)
        .margin(20)
        .onChange((value: string)=>{
          this.text2 = value
          if(this.text1 && this.text2){
            this.changeColoor = true
          } else {
            this.changeColoor = false
          }
        })
    }
    .height('100%')
    .width('100%')
  }
}

更多关于HarmonyOS鸿蒙Next中2个TextInput控件，当TextInput输入都有值时，改变Text的背景色的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

ionicwang 2楼•9 天前

TextInput 的 onChange事件里面修改

gougou168 3楼•9 天前

在HarmonyOS鸿蒙Next中，您可以通过监听TextInput控件的onChange事件来实现当两个TextInput输入都有值时改变Text的背景色。以下是实现步骤：

创建两个TextInput控件：分别用于接收用户输入。
创建Text控件：用于显示背景色变化的文本。
监听TextInput的onChange事件：在事件回调中判断两个TextInput的值是否都不为空。
更新Text的背景色：如果两个TextInput都有值，则通过style属性动态设置Text的背景色。

示例代码如下：

import { TextInput, Text, StyleSheet } from '@harmonyos/core';

class MyComponent extends Component {
  state = {
    input1: '',
    input2: '',
    textBgColor: 'transparent',
  };

  handleInput1Change = (value) => {
    this.setState({ input1: value }, this.updateTextBgColor);
  };

  handleInput2Change = (value) => {
    this.setState({ input2: value }, this.updateTextBgColor);
  };

  updateTextBgColor = () => {
    const { input1, input2 } = this.state;
    if (input1 && input2) {
      this.setState({ textBgColor: 'yellow' });
    } else {
      this.setState({ textBgColor: 'transparent' });
    }
  };

  render() {
    return (
      <View>
        <TextInput
          style={styles.input}
          onChange={this.handleInput1Change}
          value={this.state.input1}
        />
        <TextInput
          style={styles.input}
          onChange={this.handleInput2Change}
          value={this.state.input2}
        />
        <Text style={[styles.text, { backgroundColor: this.state.textBgColor }]}>
          Background Color
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    marginBottom: 10,
  },
  text: {
    padding: 10,
  },
});

该代码通过onChange事件监听TextInput的输入变化，并根据输入值更新Text的背景色。

bupafengyu 4楼•9 天前

在HarmonyOS鸿蒙Next中，可以通过监听两个TextInput控件的输入事件，并在输入都有值时动态改变Text控件的背景色。以下是一个简单的实现示例：

@Entry
@Component
struct Index {
  @State private inputValue1: string = '';
  @State private inputValue2: string = '';
  @State private textBgColor: string = '#FFFFFF';

  build() {
    Column() {
      TextInput({ placeholder: '输入1' })
        .onChange((value) => {
          this.inputValue1 = value;
          this.updateTextBgColor();
        });

      TextInput({ placeholder: '输入2' })
        .onChange((value) => {
          this.inputValue2 = value;
          this.updateTextBgColor();
        });

      Text('文本')
        .backgroundColor(this.textBgColor)
        .padding(10);
    }
  }

  updateTextBgColor() {
    if (this.inputValue1 && this.inputValue2) {
      this.textBgColor = '#00FF00'; // 输入都有值时改变背景色为绿色
    } else {
      this.textBgColor = '#FFFFFF'; // 否则恢复默认背景色
    }
  }
}

在这个示例中，TextInput的onChange事件监听输入内容，当两个输入框都有值时，Text的背景色会变为绿色。