Question

我正在使用本机导航将参数从一个页面传递到另一页面。该值可以传递，但是问题是当该值在文本框中时，无法对其进行编辑。按下一个键，它会自动删除，并在其中保留初始值。

查看容器

const GroupDetailsEditScreen =({setGroupName, groupName, setDescription, description, onSelectImage, ImageSource, displayImage, onSaveEdits, showIndicator})=>(
      <View style={{padding:10, backgroundColor:'white', height:'100%'}}>

      <TextInput value={groupName} onChangeText={setGroupName} style={{marginBottom:10, backgroundColor:'#fafafa'}} mode="flat"  label='Group Name' autoCapitalize = 'none' />
      <TextInput value={description} onChangeText={setDescription} style={{marginBottom:10,backgroundColor:'#fafafa', height:150}} mode="flat" multiline={true} numberOfLines={3} label='Group Description' />
      <Button style={{height:55, margin:10, justifyContent:"center"}}
      icon="save" 
      mode="contained"
      color="#00aae0"
      uppercase="false"
      onPress={() => {onSaveEdits()}} >
    Save Edit
  </Button>

  <ActivityIndicator style={{padding:5, color:'white'}}
                animating={showIndicator}
                size="small"/>

     </View>
    )

export default GroupDetailsEditScreen;

容器组件

class GroupDetailsEditContainer extends Component{
  static navigationOptions = () => ({
    headerStyle: {backgroundColor: '#00aae0'},
    headerTintColor: 'white'
  })

  state = {
    displayImage: false,
    showLoader : false
  };

  setGroupName = (newGroupName) => {
    this.setState({ newGroupName: newGroupName })
    }

  setDescription = (description) => {
    this.setState({ description: description })
    }


render() {
const { navigation } = this.props;
const getGroupID = navigation.getParam('groupID');
const getGroupName = navigation.getParam('groupName');
const getDescription =  navigation.getParam('description');
    return (
    <GroupDetailsEditScreen
      onHandleSelectedValue = {this.handleSelectedValue}
      onSelectImage = {this.handleSelectPhoto}
      ImageSource = {this.state.ImageSource}
      displayImage = {this.state.displayImage}
      setGroupName = {this.setGroupName}
      groupName =     {getGroupName}
      setDescription = {this.setDescription}
      description =  {getDescription}
      showIndicator = {this.state.showLoader}
      onSaveEdits = {this.handleSaveEdits}
    />
    );
  }
}

export default GroupDetailsEditContainer;

Answer 1

如果存在，则应将更新的值从父组件传递给子组件，如果不存在则将默认值传递给子组件，以使该值以状态更新：

InstructorID

我建议您对状态进行解构，使其更具可读性，就像您对道具所做的操作一样：

CourseID

如果您想要不受控制的输入，也可以使用<GroupDetailsEditScreen groupName ={this.state.newGroupName || getGroupName} description ={this.state.description || getDescription} />的{{3}}道具：

const { description, newGroupName } = this.state

<GroupDetailsEditScreen
    groupName ={newGroupName || getGroupName}
    description ={description || getDescription}
/>

无法使用本机反应编辑初始文本框值

1 个答案: