Question

我得到了以下组件，我想使用defaultValue初始化TextInput，然后在用户键入时更新其值。

我该怎么做？

这是我尝试过的-但是这样TextInput在初始化时总是为空。

class Note extends Component {
    state = {
        text: ""
    };

    render() {
        const {onChange} = this.props;

        return (
                <TextInput
                    onChangeText={(text) => {
                         this.setState({text}); 
                         onChange(text);
                    }
                    value={this.state.text}
                    defaultValue={this.props.text}
                />
        );
    } }

“反应”：“ ^ 16.4.1”
“ react-native”：“ ^ 0.55.4”，

Answer 1

终于解决了，

关键是以下内容-除非未定义“值”，否则“值”在“ defaultValue”之前！

因此，通过初始化this.state.text = undefined，可以使用this.props.text初始化defaultValue。

class Note extends Component {
    state = {
        text: undefined
    };

    render() {
        const {onChange} = this.props;

        return (
            <View>
                <TextInput
                    onChangeText={(text) => {
                         this.setState({text}); 
                         onChange(text);
                    }
                    value={this.state.text}
                    defaultValue={this.props.text}
                />
            </View>
        );
    }
}

我发现它比@anilSidhu解决方案更干净。

Answer 2

您可以在main.o本身中设置默认值，如下所示：

state

Answer 3

class Note extends Component {
  state = {
    text: undefined
  };
  componentDidMount() {
    this.setState({ text: this.props.text })
  }
  render() {

    return (
      <TextInput
        onChange={(text) => {
          this.setState({ text: text.target.value });

        }}
        value={this.state.text}
      />
    );
  }
}

它应该对您有用，如果您仍然遇到问题，请告诉我

Answer 4

基本上，当您同时拥有value和defaultValue道具时，始终以value道具为准，因此defaultValue不会得到体现。

React Native-TextInput-如何一起使用value和defaultValue

4 个答案: