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

【问题标题】：React Native - TextInput - How to use value & defaultValue togetherReact Native - TextInput - 如何一起使用 value 和 defaultValue
【发布时间】：2022-01-26 18:13:55
【问题描述】：

我得到了以下组件，我想用 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”
“反应原生”：“^0.55.4”，

【问题讨论】：

是否要在用户输入中附加默认值？
您想更新 text change 的值。对吗？
@MohammedAshfaq 对不起，你是什么意思？
@anilsidhu 是的。
@chenop 我正在做一个更好的代码格式的答案

标签： reactjs react-native

【解决方案1】：

终于解决了，

键如下 - 除非“值”未定义，否则“值”优先于“默认值”！

所以，初始化this.state.text = undefined，这样defaultValue就可以用this.props.text初始化了。

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 解决方案更干净。

【讨论】：

绝对是最佳答案
我遇到了将整数值设置为默认值的问题。 value.toString() 解决了我的问题。

【解决方案2】：

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

class Note extends Component {
    state = {
        text: this.props.text
    };

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

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

【讨论】：

如果对您有用，请接受我的回答。
感谢您的回答但我认为这还不够好。这样 props.text 将只使用一次（当构造函数被调用时）我希望 props.text 在每次更改时都使用。
另外请注意，如果 Note 被另一个连接到 Redux 的组件封装（我的情况，但我认为这是常见情况）并且封装的组件初始化传递给 Note 的文本属性 - 比this.props.text 会在第一时间初始化为 undefined。
是的，你是对的，因为我认为第一次渲染将空白值传递给TextInput 的value，然后它将采用this.props.text。可能是这个原因。
感谢您的时间，第一次 this.props.text 未定义。封装的组件使用 mapStateToProps 来初始化文本，但它仅在它被传递（未定义）到 Note 之后才初始化文本

【解决方案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}
      />
    );
  }
}

它应该对你有用，如果你仍然面临这个问题，请告诉我

【讨论】：

【解决方案4】：

基本上，当您同时拥有value 和defaultValue 属性时，总是value 属性优先，因此defaultValue 不会被反映。

【讨论】：

【解决方案5】：

有时，如果您将数字类型显示为默认值，则它不起作用。您必须按如下方式转换为字符串类型：

defaultValue(String(this.props.text)}

【讨论】：