我的UI如下:
这些字段来自API调用响应。来自API响应的字段数可以变化。我使用列表实现了它,如下所示:
private _onRenderCell = (field): JSX.Element => {
return (
<div>
<div>
{field["fieldName"]}
<br/>
{
<TextField
onChanged={this.onTextChanged}
/>
}
<br/>
</div>
</div>
);
}
public render(): JSX.Element {
const result: JSX.Element = (
<FocusZone direction={FocusZoneDirection.vertical}>
<List
items={this.props.fields}
onRenderCell={this._onRenderCell}
/>
</FocusZone>
);
return (
<div>
{result}
</div>
);
}
单击“确定”按钮后,如何从文本框中获取值,以便textbox1值用于Name,textbox2值用于Age,textbox3值用于Gender?
答案 0 :(得分:1)
https://codepen.io/vitalius1/pen/OroprE也许可以帮上忙。考虑到TextField的数量是未知的,我相信这应该为您提供一个良好的开端。如果这对您有效,请随时解决此问题。感谢您使用Fabric,并为长时间没有响应表示歉意。
class Content extends React.Component {
private textFieldRefs: IRefObject<ITextField>[] = [];
constructor() {
super();
this.state = {
inputValues: []
}
}
render() {
const { inputValues } = this.state;
return (
<Fabric className='foo'>
<List
items={_items}
onRenderCell={this._onRenderCell}
/>
<DefaultButton
type="submit"
onClick={this._onClick}
>
Click here
</DefaultButton>
{inputValues.map((ref, index) => (
<div key={index}>{ref}</div>
))}
</Fabric>
);
}
private _onRenderCell = (item) => {
const ref = React.createRef<ITextField>();
this.textFieldRefs.push(ref);
return (
<div>
{item.name}
<br/>
<TextField componentRef={ref}/>
<br/>
</div>
);
}
private _onClick = () => {
const {inputValues} = this.state;
const newValues = [];
this.textFieldRefs.forEach((ref) => {
console.log(ref.current.value);
newValues.push(ref.current.value);
})
this.setState({
inputValues: newValues.concat(inputValues)
})
}
}