將選擇的值保存到表單字段

Question

我有一個表單，其中有一個用於添加用戶的輸入字段。 這是另一種領域。 當用戶單擊該字段時，該用戶將被轉到另一個頁面，該頁面上已經有一個用戶列表，用戶也可以在該頁面中進行搜索。 從該頁面，如果用戶選擇了特定用戶，則他/她將被重定向回該表單頁面，並用所選用戶名填寫該字段。

現在我已經嘗試如下

<Row>
  <InputFieldWrapper label="Assigned to">
      <Field
        name="assigned_to"
        input=""
        placeholder="Search for contacts to assign"
        readonly={false}
        component={InputTextWithSearchField}
        onPress={() => Actions[routeConstants.SEARCH_ASSIGNEE]({
          keys     : 'user',
          data     : taskValues ? taskValues.assigned_to : [],
          faFetched: faFetched.users,
          fieldName: 'assigned_to',
          label    : 'Assignee',
        })}
      />
  </InputFieldWrapper>
</Row>

const InputTextWithSearchField = props => {
  let value = props.input.value || {};

  makeUpdate = text => {
    props.update(text);
  };

  return (
    <View style={styles.inputFieldWrapper}>
      <View style={styles.field}>
        <TextInput
          style={styles.inputField}
          onChangeText={makeUpdate}
          value={value.label}
          placeholder={props.placeholder} />
      </View>
      <View style={styles.rightSideContent}>
        <Icon
          name="search"
          size={26}
          onPress={() => props.onPress()}
          style={styles.searchField} />
      </View>
    </View>
  );
};

class Search extends React.Component { // eslint-disable-line
  state = {
    items: [],
  }

  componentDidMount() {
    this.update(' ');
  }

  // handleChange = data => {
  //   console.log('change', data);
  // };

  update = text => {
    this.props.faFetched.sync(
      { search: text, priority_fields: 'personal.first_name,personal.last_name' }
    ).
    then(res => this.setState({ items: res })).
    catch(err => console.log(err)); // eslint-disable-line
  };

  itemSection = item => {
    if(item)return alphabetic.map(alpha => {
      return ({
        title: alpha,
        data : (item || []).filter(contact => contact.personal.first_name[0] === alpha)
      });
    });
  };

  renderHeader = ({ section }) => {
    return <View style={styles.sectionHeader}>
        <Text style={styles.sectionText}>
          {section.title}
        </Text>
    </View>;
  };

  render() {
    const { faFetched, data } = this.props;
    const { items } = this.state;
    return (
      <View style={styles.container}>
        <ActionButtons
          label={this.props.label}
          />
          <KeyboardAvoidingView keyboardVerticalOffset={0} behavior='padding'>
            <ScrollView
              keyboardShouldPersistTaps="always"
            >
              <View style={styles.formContainer}>
                <Row zIndex={5}>
                  <InputFieldWrapper>
                    <Field
                      input=""
                      name={this.props.fieldName}
                      placeholder="Search contact"
                      update={this.update}
                      readonly={false}
                      component={InputTextWithSearchField}
                    />
                  </InputFieldWrapper>
                </Row>
              </View>
              <SectionList
                sections={this.itemSection(items && items)}
                renderItem={({ item, section }) => {
                  if(item)return <ListItem
                    item={item}
                    section={section} />;
                }}
                renderSectionHeader={items && this.renderHeader}
                keyExtractor={item => item._id}
              />
            </ScrollView>
          </KeyboardAvoidingView>
      </View>
    );
  }
}


class ListItem extends React.Component {
  render() {
    return (
      <View style={styles.sectionItemWrapper}>
      <TouchableOpacity onPress={() => null;}>
        <Text style={styles.sectionItem}>
          {this.props.item.personal.full_name}
        </Text>
      </TouchableOpacity>
      </View>
    );
  }
}

應該跟隨

當用戶單擊此輸入字段時，他/她將轉到下一步

下一步是這樣，當用戶從列表中選擇用戶名時，他/她將被重定向回表單頁面，在該頁面中應在該字段中填寫該用戶名

有人可以給我一個主意嗎？ 現在，我只能將用戶重定向到聯系人列表，但是我不知道在用戶觸摸聯系人列表並使用該值填充字段后如何路由回同一表單頁面

Answer 1

如果您使用反應導航，則可以導航回表單頁面並隨同發送參數。
this.props.navigation.navigate（“ form”，{userID：id，userName：Name，}）

然后在componentdidmount方法中，將文本字段的值設置為傳入參數中的值。

Answer 2

如果您使用的是react-native-router-flux

Actions.YOURSCENE({userID:id, userName: Name});

或使用

Actions.pop({refresh: {userID:id, userName: Name}});

您可以在this.props找到傳遞的數據