javascript - 如何使我的输入字段预先填充数据并在页面加载时可编辑？

Question

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

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

这是类组件片段:

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>
        );
    }
}

Answer 1

我认为最好的方法是使其成为一个功能组件。您可以使用React Hooks用于状态逻辑并使您的代码更加简洁。

我会解构 Prop 并将它们直接设置为初始状态。然后，我将添加一些条件逻辑，以便仅在设置初始状态时呈现输入字段。完毕!

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

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>
  );
}