我是React的新手,我的场景是有一个带有四个选项的select语句。基于用户从下拉列表中选择一个选项,我需要在一行中创建一个动态输入字段并将其附加到包装元素中。我创建的动态字段对于这四个选项中的每个选项都是不同的。用户可以添加输入字段以及删除输入字段,如下所示:http://formvalidation.io/examples/adding-dynamic-field /
但是在上面我们可以添加和添加删除相同类型的输入字段。在我的情况下,动态字段将基于所选的选项。所以那里的专家指导我如何在Reactjs中实现此功能
总之,这可以通过在select元素上触发onchange事件来实现。目前尚不清楚您要做什么,但我相信这与这种情况类似
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>
)
}
}
本质上,这里发生的是我们在组件状态上存储了一组选项,最初是空的。现在,当用户选择某项并添加一个操作时,它将添加到状态数组中。在renderRows函数中,您具有一系列if / if else来决定要返回哪种行,或者可以使用switch块。
因此,现在当用户在下拉菜单中选择某项并单击添加操作时,将立即附加一个新的输入字段。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句