0

我正在从 Office Fabric 创建一个面板：

  <div className={ styles.column }>
    <DefaultButton 
      onClick={this._showJobCreatePanel.bind(this)} text="Open Panel" 
    />
    <Panel
      isOpen={this.state.shouldShowJobCreatePanel}
      type={PanelType.smallFixedFar}
      onDismiss={this._hideJobCreatePanel.bind(this)}
      headerText="Create new Delivery Job"
      closeButtonAriaLabel="Cancel"
      onRenderFooterContent={this._onRenderFooterContent.bind(this)}
    >
      <ChoiceGroup
        options={trucksGroupOptions}
        required={true}
        label="Trucks"
        onChange={this._onChangeTruckChoice.bind(this)}
        style={divStyle} 
      ></ChoiceGroup>
      <Toggle
        defaultChecked={false}
        label="Out of Service"
        onText="Yes"
        offText="No"
        onChanged={newValue => {this._jobToCreate.OutOfService = newValue; this.setState({shouldDisableFields: newValue});}}
      ></Toggle>
      <TextField 
        disabled={this.state.shouldDisableFields} 
        required={!this.state.shouldDisableFields} 
        placeholder="Enter Customer" 
        label="Customer" 
        onChanged = {newValue => {this._jobToCreate.Title = newValue;}}
      ></TextField>
      <div style = {divStyle}></div>
    </Panel>
  </div>

如果切换设置为 true，我想禁用文本字段。我的代码有效，我切换到 true 并且文本字段被禁用。

我遇到的问题是当我调用setState它时正在重绘面板，而我正在丢失用户对ChoiceGroup.

我想我可以改变我IChoiceGroupOption[]小组的价值观：

  <Toggle
    defaultChecked={false}
    label="Out of Service"
    onText="Yes"
    offText="No"
    onChanged={newValue => {
      for (let truckInOptions of trucksGroupOptions) {
        if (truckInOptions.key === this._jobToCreate.Truck) {
          truckInOptions.checked = newValue;
        }
      }
      console.log("truksGroupOptions: ", trucksGroupOptions);
      this._jobToCreate.OutOfService = newValue; 
      this.setState({shouldDisableFields: newValue});
    }}
  ></Toggle>

Checked 正在更改为 true 但ChoiceGroup仍在清除选择。

如何根据切换值启用/禁用文本字段？

4

0 回答 0