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

我的UI如下所示：

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

这些字段来自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>
    );
}

private\u onRenderCell=（字段）：JSX.Element=>{
返回(
{field[“fieldName”]}


{
}


);
}
public render（）：JSX.Element{
常量结果：JSX.Element=(
);        
返回(
{result}
);
}

单击“确定”按钮，如何从文本框中获取值，以便文本框1的值表示姓名，文本框2的值表示年龄，文本框3的值表示性别？

这可能会有所帮助。考虑到文本字段的数量是未知的，我相信这会给你一个好的开始。如果这对您有效，请随时关闭此问题。感谢您使用织物，并对这么长时间没有回复表示歉意

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

类内容扩展了React.Component{
私有textFieldRefs:IRefObject[]=[]；
构造函数（）{
超级（）；
此.state={
输入值：[]
}
}
render（）{
const{inputValues}=this.state；
返回(
点击这里
{inputValues.map（（ref，index）=>(
{ref}
))}
);
}
private\u onRenderCell=（项目）=>{
const ref=React.createRef（）；
此.textFieldRefs.push（ref）；
返回(
{item.name}




);
}
private _onClick=（）=>{
const{inputValues}=this.state；
常量newValues=[]；
this.textFieldRefs.forEach（（ref）=>{
控制台日志（参考当前值）；
newValues.push（参考当前值）；
})
这是我的国家({
inputValues:newValues.concat（inputValues）
})
}
}

如何验证这些文本字段并在单击按钮时在每个空文本字段上显示错误消息+红色边框？