Question

如何在提交表单时获取所选元素。我正在使用reactjs autosuggest。

我的父组件

<Form
                 onSubmit={this.submitFormadd}
                 layout="horizontal"
                 ref="myformadd"
                 >
                     <MyAutosuggest
                       data={this.props.users}
                       id="river"
                       name="river"
                       placeholder="Enter River Name"
                       onChange={this.onChange}
                       required="true"
                     />
                     <MyAutosuggest
                       data={this.props.drivers}
                       id="driver"
                       name="driver"
                       placeholder="Enter Driver Name"
                       onChange={this.onChange}
                     />
                     <fieldset>
                       <Row layout="horizontal">
                           <input className="btn btn-primary" formNoValidate={true} type="submit" defaultValue="Submit" />
                       </Row>
                   </fieldset>
                 </Form>

Answer 1

您已为自动提示错误地设置了onChange。变化：

onChange={this.onChange}

到

onChange={this.onChange.bind(this)}

然后将所选元素存储在onChange方法中。触发提交后，您将已经存储了元素。

Answer 2

<Autosuggest

                   id="river"
                   name="river"
                   placeholder="Enter River Name"
                   onChange={this.onChange}
                   required="true"
                   data={this.props.users}                                                                                                                                                
                   getSuggestionValue={this.getSuggestionValue.bind(this)}/>

我认为以上代码会有所帮助，在getSuggestionValue中，您将获得可以使用的值，

例如：

getSuggestionValue(value){
     this.setState({ val:value});  //or anything else
}

提交（示例）时：

submitFunction(){
  console.log(this.state.val); //receive value here
}

来自codepen

的代码更改

const languages = [
  {
    name: 'C',
    year: 1972
  },
  {
    name: 'C#',
    year: 2000
  },
  {
    name: 'C++',
    year: 1983
  },
  {
    name: 'Clojure',
    year: 2007
  },
  {
    name: 'Elm',
    year: 2012
  },
  {
    name: 'Go',
    year: 2009
  },
  {
    name: 'Haskell',
    year: 1990
  },
  {
    name: 'Java',
    year: 1995
  },
  {
    name: 'Javascript',
    year: 1995
  },
  {
    name: 'Perl',
    year: 1987
  },
  {
    name: 'PHP',
    year: 1995
  },
  {
    name: 'Python',
    year: 1991
  },
  {
    name: 'Ruby',
    year: 1995
  },
  {
    name: 'Scala',
    year: 2003
  }
];

// https://developer.mozilla.org/en/docs/Web/JavaScript/Guide/Regular_Expressions#Using_Special_Characters
function escapeRegexCharacters(str) {
  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}

function getSuggestions(value) {
  const escapedValue = escapeRegexCharacters(value.trim());

  if (escapedValue === '') {
    return [];
  }

  const regex = new RegExp('^' + escapedValue, 'i');

  return languages.filter(language => regex.test(language.name));
}

function getSuggestionValue(suggestion) {
  return this.props.getValue(suggestion.name,this.props.id);
}

function renderSuggestion(suggestion) {
  return (
    <span>{suggestion.name}</span>
  );
}

class MyAutosuggest extends React.Component {
  constructor() {
    super();

    this.state = {
      value: '',
      suggestions: []
    };    
  }

  onChange = (_, { newValue }) => {
    const { id, onChange } = this.props;

    this.setState({
      value: newValue
    });

    onChange(id, newValue);
  };

  onSuggestionsFetchRequested = ({ value }) => {
    this.setState({
      suggestions: getSuggestions(value)
    });
  };

  onSuggestionsClearRequested = () => {
    this.setState({
      suggestions: []
    });
  };

  render() {
    const { id, placeholder } = this.props;
    const { value, suggestions } = this.state;
    const inputProps = {
      placeholder,
      value,
      onChange: this.onChange
    };

    return (
      <Autosuggest 
        id={id}
        suggestions={suggestions}
        onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
        onSuggestionsClearRequested={this.onSuggestionsClearRequested}
        getSuggestionValue={getSuggestionValue}
        renderSuggestion={renderSuggestion}
        inputProps={inputProps} 
      />
    );
  }
}

class App extends React.Component {
  onChange(id, newValue) {
    console.log(`${id} changed to ${newValue}`);
  }
  getValueForInput(val,id){
    console.log(val,id);
  }


  render() {
    return (
      <div>
        <MyAutosuggest
          id="type-c"
          placeholder="Type 'c'"
          onChange={this.onChange}
          getValue={this.getValueForInput.bind(this)}
        />
        <MyAutosuggest
          id="type-p"
          placeholder="Type 'p'"
          onChange={this.onChange}
        />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

Answer 3

这是我的方法。

onChange = (event, { newValue, method }) => {
    let bookObj;

    if (method == "click") {
      this.props.bookiesList.filter(book=> {
        if (book.name.trim() === newValue.trim()) {
          bookObj= book
        }
      });
    }

  };

Reactjs autosuggest - 接收所选项目

3 个答案: