javascript - React: Add/Change text input base on a selected option -
i trying display new text input based on selected option. able below old value entered present no matter change new select option to.
what might better way achieve this? appreciate suggestions.
class loadcomponent extends react.component { static proptypes = { ...... }; static defaultprops = { .... }; constructor() { super(); this.state = { value: "" }; } state = { ... }; reset = (selected) => { this.setstate({ selectedinputname: selected.target[selected.target.selectedindex].text, selectedinputid: selected.target.value }); }; maketextinput = () => { return ( <textinput label={this.state.selectedinputname} placeholder={`please enter ${this.state.selectedinputname} here!`} onblur={event => this.setstate({[this.state.selectedinputid]: event.target.value})} showclear value={this.state.value} /> ); }; render() { let newinputtext = ''; if (this.state.selectedinputid !== '') { newinputtext = this.maketextinput(); } return ( <select label="what search with?" options={this.props.searchoptions} onchange={selected => this.reset(selected)} /> <div classname="search margin_bottom_large"> {newinputtext} );
maketextinput
function creates new object, react
's perspective it's same component because react
distinguishes them looking @ type
, key
. make react recreate element, have change 1 of values.
this code changes type
of newinputtext
element each time renders (because newinputtext
refers new function):
reset = (selected) => { this.setstate({ selectedinputname: selected.target[selected.target.selectedindex].text, selectedinputid: selected.target.value }); }; maketextinput = () => { return ( <textinput label={this.state.selectedinputname} placeholder={`please enter ${this.state.selectedinputname} here!`} onblur={event => this.setstate({[this.state.selectedinputid]: event.target.value})} showclear /> ); }; render() { let newinputtext = () => ''; if (this.state.selectedinputid !== '') { newinputtext = () => this.maketextinput(); } return ( <select label="what search with?" options={this.props.searchoptions} onchange={selected => this.reset(selected)} /> <div classname="search margin_bottom_large"> <newinputtext /> );
this code assigns different key textinput
each time:
reset = (selected) => { this.setstate({ selectedinputname: selected.target[selected.target.selectedindex].text, selectedinputid: selected.target.value }); }; maketextinput = () => { return ( <textinput key={math.random()} label={this.state.selectedinputname} placeholder={`please enter ${this.state.selectedinputname} here!`} onblur={event => this.setstate({[this.state.selectedinputid]: event.target.value})} showclear /> ); }; render() { let newinputtext = ''; if (this.state.selectedinputid !== '') { newinputtext = this.maketextinput(); } return ( <select label="what search with?" options={this.props.searchoptions} onchange={selected => this.reset(selected)} /> <div classname="search margin_bottom_large"> {newinputtext} );
Comments
Post a Comment