Question

我有2个Textinput，我想要一个处理程序，它可以从多个Textinput中获取值



export default class App extends Component {
state = { 
      text: '',
      textTwo:''
       };
  }

  handleChange=(text)=>{
    this.setState({
      text
    })
  }

      <View style={styles.container}>
        <TextInput style={{ width: 300, height: 50, backgroundColor: 'gray', fontWeight: 'bold', textColor: 'white', fontSize: 30,marginTop:20
          }}
          placeholder="vrdth No."
          onChangeText={(text)=>this.handleChange(text)}
        />
        <TextInput style={{ width: 300, height: 50, backgroundColor: 'gray', fontWeight: 'bold', textColor: 'white', fontSize: 30,marginTop:20
          }}
          placeholder="vrdth No."
          onChangeText={(text)=>this.handleChange(text)}
        />

        <Text style={{ padding: 10, fontSize: 16, fontWeight: 'bold' }}>
          {this.state.text}
        </Text>
        <Text style={{ padding: 10, fontSize: 16, fontWeight: 'bold' }}>
          {this.state.textTwo}
        </Text>
      </View>

”“我希望在使用单个处理程序输入状态时需要更新状态我已将我的代码添加到Snake.expo.io中。请检查下面的参考链接 ” 检查参考snack.expo.io

Answer 1

执行此操作的方法有很多，我现在想到的更容易的是将第二个参数传递给您的处理函数，并利用es6解构的优势

您对onChangeText的调用将是这样

onChangeText={(text)=>this.handleChange(text, 'text')}

onChangeText={(text)=>this.handleChange(text, 'textTwo')}

，然后您的处理程序将使用分解将文本应用于正确状态

  handleChange=(text, stateProp)=>{
    this.setState({
      [stateProp]: text
    })
  }

您可以在此链接中了解更多信息

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Computed_object_property_names_and_destructuring

如何使用单个处理程序处理多个TextInput？

1 个答案: