office-ui-fabric - 获取动态创建的输入控件的值

Question

在我的 React TypeScript 项目中，我正在动态创建多个输入控件，如 TextField、DatePicker、Checkbox、ComboBox 等......以 UI 等形式。单击提交时，我想获取每个输入控件的值。什么是有效的方法来做到这一点？我可以为每个控件设置一个 onChange 事件，但我想知道是否有更好的方法来做到这一点。

Answer 1

这不是一个坏方法。您可能应该将值存储在组件的本地状态（即setState）或 Redux/Mobx/whatever 存储中（如果有的话）。

话虽如此，如果您有许多控件并且不想为每个控件添加单独的处理程序，Fabric 组件的onChange处理程序具有大部分相似的 API，因此您可以拥有一个处理程序，并向元素添加一个标识符，以便它更容易存储。

就像是：

class MyForm extends React.Component<MyFormProps, MyFormState> {
    constructor(props: MyFormProps) {
        super(props);
        this.state = {
            formFields: {...defaultFormValues} // you can imagine having an object of default values
        };
    }

    private _onChangeHandler(ev: React.FormEvent<HTMLElement | HTMLInputElement>, newValue: any) => {
        const formFields = {...this.state.formFields};
        formFields[ev.target.dataset.id] = newValue;
        this.setState({formFields});
    }

    public render() {
        return (
            <form>
                <TextField data-id="formelem1" onChange={this._onChangeHandler} />
                <TextField data-id="formelem2" onChange={this._onChangeHandler} />
                <CheckBox data-id="checkbox1" onChange={this._onChangeHandler} />
            </form>
        );
    }
}

请注意，一个例外是DatePicker因为它的 onChange 处理程序 ( onSelectDate) 接收新选择的日期作为单个参数，但您可以轻松添加一个if子句来处理这种情况。