In summary this can be achieved by triggering an onchange event on your select element. It's not entirely clear what you're asking to do, but I believe it's something similar to this situation
class Form extends Component {
constructor() {
super()
this.state = {
options: []
}
}
addOperation(e) {
const selectedValue = this.refs.selection.value
const currentOptions = this.state.options
currentOptions.push(selectedValue);
// append selected value to the state's options array on every change
this.setState({ options: currentOptions })
}
renderRows() {
// this is where you'll define each type of row
this.state.options.map((option, index) => {
if (option === "add") {
return (
<tr class="form-row" key={index}>
<td>Adjust Price (Add)</td>
<td>
<label>
Add
<input type="text" placeholder={option} />
</label>
to
<select>
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</select>
</td>
<td>
<button>Remove</button>
</td>
</tr>
)
} else if (option === "multiply") {
return (
<tr class="form-row" key={index}>
<td>Adjust Price (Multiply)</td>
<td>
<label>
Multiply
<input type="text" placeholder={option} />
</label>
to
<select>
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</select>
</td>
<td>
<button>Remove</button>
</td>
</tr>
)
} else if (option === "equals") {
// return a different row here
} else if (option === "not equals") {
// return a different row here
}
})
}
render () {
return (
<form>
<div className="appended-inputs">
{renderRows.bind(this)}
</div>
<select name="select" id="select" ref="selection">
<option value="add">Adjust Price (Add)</option>
<option value="multiply">Adjust Price (Multiply)</option>
<option value="equals">Filter Products (equals)</option>
<option value="not equals">Filter Products (not equals)</option>
</select>
<button onClick={addOperation.bind(this)}>Add Operation</button>
</form>
)
}
}
Essentially what's happening here is we're storing an array of options on the components state, initially empty. Now when the user selects something and adds an operation it gets added to the state array. In the renderRows function you have a chain of if / if else to decide what kind of row to return, or you can use a switch block.
So now when the user selects something in the drop down and clicks add operation, a new input field is immediately appended.
i am newbie in React.i have a scenario like there is a select statement with four options.based on user selecting an option from the dropdown ,i need to create a dynamic input fields in a row and append it to a wrapper element.
the dynamic fields i am creating will be different for each of the four options.the user has the ability to add input fields as well as remove input fields as you see here http://formvalidation.io/examples/adding-dynamic-field/
