Question

我必须有一个不受控制的文本输入（由于某些原因这里没有详细说明）。我试图阻止我的<TextInput>发生变化。

这是我的组件，这里是它的Snack演示 - https://snack.expo.io/@noitsnack/textinput-block-onchange

class UncontrolledInput extends Component {
    inputRef = null

    render() {
        return (
            <View>
                <TextInput ref={this.refInput} onChange={this.handleChange} />
            </View>
        )
    }

    refInput = el => this.inputRef = el

    handleChange = e => {
        const { nativeEvent:{ text } } = e;

        // block i characters
        if (text.includes('i')) {
            e.preventDefault();
            e.stopPropagation();
            e.returnValue = false;
            return false;
        }
    }
}

这可能吗？虽然preventDefault中存在stopPoropagation和e，但它们似乎无能为力。

Answer 1

您只是希望在某些情况下不更新文字？您始终可以将其绑定到状态值，并确定状态值是否应更新：

class UncontrolledInput extends Component {
    state = {
      text: '',
    }

    render() {
        return (
            <View>
                <TextInput value={this.state.text} onChangeText={this.handleChange} />
            </View>
        )
    }

    handleChange = text => {
        // only update if no 'i'
        if (!text.includes('i')) {
            this.setState({ text });
        }
    }
}

在onChange中改变TextInput块（preventDefault）？

1 个答案: