Question

我正在为我的项目使用实质性UI和React。我有几个TextField，每个文本框旁边分别有一个按钮，我想要单击按钮时，它将分别获取其TextField的值并将其值设置为其他TextField的输入，这里是{{3 }}

说明：

当您转到链接时，每个TextField旁边将分别具有3个TextField和3个按钮，

 var defaultArray = Array(3).fill("");
 var [valueList, setValueList] = useState(defaultArray);

当您键入onChange事件时，将为数组valueList中的项目设置相应的新值，但不会更新TextField的defaultValue，请也使它也更新defaultValue

 {valueList.map((item, index) => {
        return (
          <div key={index}>
            <TextField
              id="standard-basic"
              label="label"
              defaultValue={valueList[index]}
              onChange={(event) => {
                let newValueList = valueList;
                newValueList[index] = event.target.value;
                setValueList(newValueList);
                console.log(valueList);
              }}
            />
            <Button
              variant="contained"
              color="primary"
              onClick={() => {
                let newValueList = Array(3).fill(valueList[index]);
                setValueList(newValueList);
                console.log(valueList);
              }}
            >
              Update All
            </Button>
          </div>
        );
      })}

感谢您抽出宝贵的时间来帮助我，如果可以的话，您可以直接在codesandbox链接中进行修改，祝您生活愉快

Answer 1

利用每个数组元素的index来控制value的{{1}}。确保在更新状态时克隆TextField以避免数组的直接突变

valueList

Answer 2

您已经在valueList数组中添加了更改时的值。只需从该数组获取值并使用索引并分别进行更新即可。请检查下面的代码。

import 'package:flutter/material.dart';
import 'package:practice_5/model/breedModel.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
import 'dart:async';
import 'package:flutter/foundation.dart';
class BreedListTile extends StatelessWidget {
  Future<List<DogData>> fetchDogs(http.Client client) async {
    final response = await client.get('https://dog.ceo/api/breeds/image/random');
    return compute(parseDog, response.body);
  }
  List<DogData> parseDog(responseBody) {
    final parsed = jsonDecode(responseBody) as List;
    return parsed.map<DogData>((json) => DogData.fromJson(json)).toList();
  }
  BreedListTile({Key key, List<DogData> dogList})
      : _dogList = dogList,
        super(key: key);
  final List<DogData> _dogList;

  @override
  Widget build(BuildContext context) {
    return Card(
      child: ListTile(
        title: Text('Test title'),
        subtitle: Text('Test subtitle'),
        leading: Container(
          child: Image.asset(_dogList[index].message),
        ),
        onTap: () {},
      ),
    );
  }
}

React Material Ui自动填充文本输入

2 个答案: