如何使我的输入字段预填充数据并在页面加载时可编辑? [英] How can I make my input field prefilled with data and editable on page load?

问题描述

我在让我的字段之一预先填充信息并进行编辑时遇到问题.我尝试在代码中移动它使用数据设置字段的位置，它要么是空白的且可编辑，要么显示预先填充的数据，但 UI 阻止我对其进行编辑.

I'm having issues getting one of my fields to pre-populate with info and be editable. I've tried moving around the code where it sets the field with the data and either it's blank and editable or shows the pre-populated data but the UI prevents me from editing it.

我遇到的问题是 bar 字段.将它放在构造函数中会用信息预先填充该字段，但 UI 阻止我对其进行编辑.为什么?这个字段应该在哪里设置或者我该如何修复它?在导航到此页面之前，我是否需要调用此对象的填充位置，以便在构造函数初始化期间填充它，或者..?

The issue I'm having is with the bar field. Putting it in the constructor pre-populates the field with info but the UI is preventing me from editing it. Why? Where should this field be set or how can I fix it? Do I need to call where this object gets populated before navigating to this page, so it gets populated during constructor initialization or..?

这是类组件片段:

export class FooBarBazComponent extends Component{
    constructor(props){

        super(props);

        this.state = {
            foo: "",
            bar: ""
        };

        const fooDetails = this.props.navigation.state.params.fooDetails;
        this.state.foo   = fooDetails.foo; 

    }

    render(){
        const disabled = this.state.foo.length !== 5 || this.state.bar.length < 5;

        //I didn't put this code in the constructor because this object is undefined in the constructor
        if(this.props.objResponse) {  
            this.state.bar = this.props.objResponse.bar; 
        }

        return(
            <View style={Styles.inputRow}>
                <View style={Styles.inlineInput}>
                    <FormLabel labelStyle={Styles.label}>FOO</FormLabel>
                    <TextInputMask
                      onChangeText={foo => this.setState({ foo })}
                      value={this.state.foo}
                    />
                </View>
                <View style={Styles.inlineInput}>
                    <FormLabel labelStyle={Styles.label}>BAR</FormLabel>
                    <TextInputMask
                        onChangeText={bar => this.setState({ bar })}
                        value={this.state.bar}
                    />
                </View> 
            </View>
        );
    }
}

推荐答案

我认为这里最好的方法是让它成为一个功能组件.您可以将 React Hooks 用于有状态的逻辑并使您的代码更简洁.

I think best approach here is to make it a functional component. You can use React Hooks for stateful logic and keep your code way more cleaner.

我会解构道具并将它们直接设置为初始状态.然后我会添加一些条件逻辑来仅在设置初始状态时呈现输入字段.完毕！

I'd destructure the props and set them directly in the initial state. Then I'd add some conditional logic for rendering the input fields only when the initial state is set. Done!

当你想改变状态时，只需使用set函数！

When you want to change the state, just use the set function!

import React, { useState } from 'react';

export default function FooBarBazComponent({ navigation, objResponse }) {
  // Initiate the state directly with the props
  const [foo, setFoo] = useState(navigation.state.params.fooDetails);
  const [bar, setBar] = useState(objResponse.bar);

  const disabled = foo.length !== 5 || bar.length < 5;

  return (
    <View style={styles.inputRow} >
      {/* Only render next block if foo is not null */}
      {foo && (
        <View style={styles.inlineInput}>
          <FormLabel labelStyle={Styles.label}>FOO</FormLabel>
          <TextInputMask
            onChangeText={foo => setFoo(foo)}
            value={foo}
          />
        </View>
      )}
      {/* Only render next block if objResponse.bar is not null */}
      {objResponse.bar && (
        <View style={styles.inlineInput}>
          <FormLabel labelStyle={Styles.label}>BAR</FormLabel>
          <TextInputMask
            onChangeText={bar => setBar(bar)}
            value={bar}
          />
        </View>
      )}
    </View>
  );
}

这篇关于如何使我的输入字段预填充数据并在页面加载时可编辑?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！