Reactjs autosuggest - 接收選定的項目

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

您已爲autosuggests設置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'));