save selected value to form field

Question

I have a form where there is an input field for adding the user. It is a different kind of field. When user click on that field, the user is routed to another page where there is already a list of users and there a user can search as well. From that page, if user selects the particular user, he/she is redirected back to that form page and fill that field with the selected user name.

For now I have tried it as following

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

It should be following

when user clicks on this input field, he/she will move to next step

next step is this and when user selects the name of user from the list he/she will be redirected back to the form page where that username should be filled in that field

Can anyone give me an idea, please? Right now I could only redirect the user to the contact list but I have no idea how can i route back to the same form page after user touches the contact list and fill the field with that value

shouldn't you not have a sectionlist inside a scrollview? – Kenzo May 28 '20 at 18:58 — Kenzo, May 28 '20 at 18:58

score 0 · Answer 1 · answered Jan 30 '18 at 08:58

0

If you are using react-navigation you can navigate back to the form page and send parameters along with.
this.props.navigation.navigate("form", { userID:id, userName: Name, })

and then in componentdidmount method set value of text field to the one passed in parameters.

answered Jan 30 '18 at 08:58

devedv

562
2
15
45

I am using react-native-router-flux for the routing. can you tell me the way in this routing library, please? – pri Jan 30 '18 at 09:21
You can pass data like this: Actions.com2 ({text: 'Hello World'}) You can recover your data in com2 like this: this.props.text https://stackoverflow.com/questions/39611634/how-to-pass-values-to-other-component-in-react-native-router-flux. Once you get the passed values on the form screen, set form text field value to it. – devedv Jan 30 '18 at 09:30
you need to do console.log(this.props.userName). – devedv Jan 30 '18 at 10:00

Kodanda Rama Durgarao poluri · Answer 2 · 2018-01-30T09:33:38.590

0

If you are using react-native-router-flux use

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

or use

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

you may find the passed data in this.props

edited Jan 30 '18 at 09:33

answered Jan 30 '18 at 09:24

Kodanda Rama Durgarao poluri

554
1
5
16

When i did the Actions.pop as Actions.pop({ refresh: { userName: personal.full_name } })}>{personal.full_name} and after touching on the text, I was routed back to the same form page where after touching the field I was routed to the Contact list screen. I did not find the props in that form page. I did console.log(props) but I did not see any userName props – pri Jan 30 '18 at 09:44
did you try the Actions.YOURSCENE – Kodanda Rama Durgarao poluri Jan 30 '18 at 10:06
@pri please check in componentWillReceiveProps. You will find as nextProps – Kodanda Rama Durgarao poluri Jan 30 '18 at 10:09
I tried only Action.pop. I will try other 2 alternatives and will tell you. – pri Jan 31 '18 at 01:06
I can't use any lifecycle methods because the form component(the first image in screenshot) is pure functional component. I tried Action.key and it worked but why pop is not working. Action.pop works only in edit form not in add form component where add and edit form both are same component – pri Jan 31 '18 at 01:09

save selected value to form field

2 Answers2