Question

当我按下按钮＆＃34; Editer＆＃34;时，我想将所有TextInput的可编辑值更改为可编辑。

我尝试过一些东西，但没有任何作用，我也不想创建同一个类来编辑表单。我相信你明白了。

Mylist.js

<ScrollView contentContainerStyle={{justifyContent: 'center'}}
    style={[Styles.container, {height: this.state.visibleHeight}]}>
    <View style={Styles.form}>
      <View style={Styles.row}>
        <Text style={Styles.rowLabel}>Produit</Text>
        <TextInput
          ref='billType'
          style={textInputStyle}
          value={billType}
          editable={false}
          keyboardType='default'
          returnKeyType='next'
          autoCapitalize='none'
          autoCorrect={false}
          onChangeText={this.handleChangeBillType}
          underlineColorAndroid='transparent'
          placeholder={billType} />
      </View>
      <View style={Styles.row}>
        <Text style={Styles.rowLabel}>Créancier</Text>
        <TextInput
          ref='billCreditor'
          style={textInputStyle}
          value={this.state.billCreditor}
          editable={false}
          keyboardType='default'
          returnKeyType='next'
          autoCapitalize='none'
          autoCorrect={false}
          onChangeText={this.handleChangeBillCreditor}
          underlineColorAndroid='transparent'
          placeholder={billCreditor} />
      </View>

      <View style={[Styles.loginRow]}>
        <TouchableOpacity style={Styles.loginButtonWrapper}
          onPress={this.handlePressLogin.bind(this)}>
          <View style={Styles.loginButton}>
            <Text style={Styles.loginText}>Editer</Text>
          </View>
        </TouchableOpacity>
        <TouchableOpacity style={Styles.loginButtonWrapper} onPress={this.goBack.bind(this)}>
          <View style={Styles.loginButton}>
            <Text style={Styles.loginText}>Supprimer</Text>
          </View>
        </TouchableOpacity>
      </View>
    </View>
  </ScrollView>

有人有想法吗？谢谢大家！

Answer 1

您可以创建状态变量并在按下编辑按钮时更改它。请尝试以下示例。

class Biller extends Component {
    constructor(props) {
        super(props)
        this.state = {
            editable: false
        }

        this.toggleEditable = this.toggleEditable.bind(this)
    }

    toggleEditable() {
        this.setState({
            editable: !this.state.editable
        })
    }

    render() {
        return (

            <ScrollView contentContainerStyle={{ justifyContent: 'center' }}
                style={[Styles.container, { height: this.state.visibleHeight }]}>
                <View style={Styles.form}>
                    <View style={Styles.row}>
                        <Text style={Styles.rowLabel}>Produit</Text>
                        <TextInput
                            ref='billType'
                            style={textInputStyle}
                            value={billType}
                            editable={this.state.editable} <--- use state variable
                            keyboardType='default'
                            returnKeyType='next'
                            autoCapitalize='none'
                            autoCorrect={false}
                            onChangeText={this.handleChangeBillType}
                            underlineColorAndroid='transparent'
                            placeholder={billType} />
                    </View>
                    <View style={Styles.row}>
                        <Text style={Styles.rowLabel}>Créancier</Text>
                        <TextInput
                            ref='billCreditor'
                            style={textInputStyle}
                            value={this.state.billCreditor}
                            editable={this.state.editable}  <--- use state variable
                            keyboardType='default'
                            returnKeyType='next'
                            autoCapitalize='none'
                            autoCorrect={false}
                            onChangeText={this.handleChangeBillCreditor}
                            underlineColorAndroid='transparent'
                            placeholder={billCreditor} />
                    </View>

                    <View style={[Styles.loginRow]}>

                        <TouchableOpacity style={Styles.loginButtonWrapper}
                            onPress={this.toggleEditable}> <-- add onPress handler
                            <View style={Styles.loginButton}>
                                <Text style={Styles.loginText}>Editer</Text>
                            </View>
                        </TouchableOpacity>
                        <TouchableOpacity style={Styles.loginButtonWrapper} onPress={this.goBack.bind(this)}>
                            <View style={Styles.loginButton}>
                                <Text style={Styles.loginText}>Supprimer</Text>
                            </View>
                        </TouchableOpacity>
                    </View>
                </View>
            </ScrollView>
        )
    }

}

按下按钮时更改TextInput可编辑属性

1 个答案: