从按钮单击顺序从文本字段中获取值？

Question

我的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？

Answer 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)
    })
  }
}