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（＆＃34; form＆＃34;，{ 用户名：ID， userName：名称， }）

然后在componentdidmount方法中将text字段的值设置为传入参数的值。

Answer 2

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

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

或使用

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

您可以在this.props

中找到传递的数据

将所选值保存到表单域

2 个答案: