在 React Native 中使用 ref 时如何清除占位符文本？

Question

我有一个 TextInput 组件在几个不同的地方被重用：

export default class SomeTextInput extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        let fontWeight = this.props.fontWeight ? this.props.fontWeight : 'Light';
        let fontName = this.props.fontName ? this.props.fontName : 'Montserrat';
        let fontString = createFontString(fontName, fontWeight);
        let applyFontFamily = { fontFamily: fontString };
        let style = this.props.style.constructor === Array ? this.props.style : [this.props.style];
        return (
            <TextInput
                ref={(ref) => {
                    this.textInput = ref
                }}
                {...this.props}
                style={[applyFontFamily, ...style]}
                onFocus={() => {
                    this.clearText();
                    console.log('show me this.textInput', this.textInput.props.placeholder)

                }}
            />
        )
    }
    clearText() {
        this.textInput.clear();
        console.log('is this being reached???')
    }
    focus() {
        this.textInput.focus();
    }
    blur() {
        this.textInput.blur();
    }
}

我也试过使用 clearTextOnFocus。我认为最好的方法是将 placeholder 更改为 ''，但我不确定 placeholder 文本是如何取自 prop已经流传下来了。

编辑：我将添加@ravibagul91 建议的代码

export default class OVTextInput extends Component {
    constructor(props) {
        super(props);
        // this.state = {
        //     placeholder: props.placeholder
        // }
    }
    render() {
        let fontWeight = this.props.fontWeight ? this.props.fontWeight : 'Light';
        let fontName = this.props.fontName ? this.props.fontName : 'Montserrat';
        let fontString = createFontString(fontName, fontWeight);
        let applyFontFamily = { fontFamily: fontString };
        let style = this.props.style.constructor === Array ? this.props.style : [this.props.style];
        return (
            <TextInput
                ref={(ref) => {
                    this.textInput = ref
                }}
                {...this.props}
                style={[applyFontFamily, ...style]}
                onFocus={() => {
                    // this.setState({ placeholder: "" });
                    this.clearText();

                }}
            />
        )
    }

    clearText = () => {
        console.log(this.textInput)
        console.log('is this being reached???', this.textInput.value);
        console.log('is this being reached???', this.textInput.placeholder);
        this.textInput.placeholder = "";
        this.textInput.value = "";

    }
    //   focus = () => {
    //         this.textInput.focus();
    //     }
    //     blur = () => {
    //         this.textInput.blur();
    //     }
    focus() {
        this.textInput.focus();
    }
    blur() {
        this.textInput.blur();
    }
};

Answer 1

您当前正在做的是擦除 text 的值。您的 Textinput 看起来像是一个用于接收和使用值的道具。 Textinput 目前无法清除 placeholders。如果您提出建议，您可以使用status values解决它。

export default class SomeTextInput extends Component {
    constructor(props) {
        super(props);
        this.state={
           placeholder: props.placeholder
        }
    }
....
            <TextInput
                ref={(ref) => {
                    this.textInput = ref
                }}
                placeholder={this.state.placeholder}
                {...this.props}
                style={[applyFontFamily, ...style]}
                onFocus={() => {
                    this.setState({ placeholder : "" });
                    console.log('show me placeholder', this.state.placeholder)

                }}
            />

Answer 2

可以直接清除placeholder赞，

this.textInput.placeholder = "";

Demo

注意： 这仅在 input 上进行了测试，但同样适用于 TextInput。

在 React Native 中使用 ref 时如何清除占位符文本？

How do I clear placeholder text when using a ref in React Native?

ref

textinput

react-native