代码之家 › 专栏 › 技术社区 › JS3

如何设置文本字段的初始值?

material-ui google-cloud-firestore firebase reactjs

0

JS3 · 技术社区 · 5 年前

我有这些文本字段来更新一个项目。如何设置productName和productPrice的初始值?

我已经有了这些productName和productPrice数据,这些数据是从上一页的一行中获取的,并存储在一个 location.state .

我已经把这些数据存储在 地方状态 :

产品名称-项目1
产品价格-2.00

目前,如果我要更新数据,并且只在product price字段中输入一个值,product name字段将作为空字符串保存在firestore中。我想为每个文本字段及其相应的数据设置一个初始值,这样即使用户只更新产品价格字段,产品名称也会保存为“Item1”,而不会保存为空字符串。我尝试使用defaultValue,但它不起作用。

const edit = () => {
  const location = useLocation();
  const data = location.state;
  const [Product, setProduct] = useState([]);
  const [productName, setProductName] = useState("");
  const [productPrice, setProductPrice] = useState("");


  useEffect(() => {
    firestore
      .collection("products")
      .doc(data)
      .onSnapshot((snapshot) => {
        const arr = [];
        arr.push({
          ...snapshot.data(),
        });
        setProduct(arr);
      });

  }, []);

  const handleSubmit = async (event) => {
    event.preventDefault();
    try {
      const Ref = firestore.collection("products").doc(data);
      const res = Ref.set(
        {
          productName,
          productPrice,
        },
        { merge: true }
      );
      alert("Successfully updated");
    } catch (err) {
      console.log(err);
    }
  };

  return (
    <div>
        {products.map((prod, index) => (
          <div>
            <form onSubmit={handleSubmit}>
              <FormControl>
                <TextField
                  id="input"
                  type=âtextâ
                  label="Product Name"
                  value={productName}
                 defaultValue={prod.productName)
                  onChange={(e) => setProductName(e.target.value)}
                />

                <TextField
                  id="input"
                  margin="dense"
                  type="text"
                  label="Product Price"
                  value={productPrice}
                  defaultValue={prod.productPrice)
                  onChange={(e) => setProductPrice(e.target.value)}
                />



                <Button
                  type="submit"
                  
                >
                  Update
                </Button>
              </FormControl>
            </form>
          </div>
        ))}
    </div>
  );
};

export default edit;

2 回复 | 直到 5 年前

1

Matthew Kwong 5 年前

我已经把这些数据存储在这个位置了。声明:

产品名称-项目1

块引用

产品价格-2.00

这个呢?

const location = useLocation();
const [productName, setProductName] = useState(location.state.productName);
const [productPrice, setProductPrice] = useState(location.state.productPrice);

2

1

Aswin_Pradeep 5 年前

因为提供了名为data的变量具有默认的产品详细信息

可以用这种方式初始化状态

  const [productName, setProductName] = useState(data.productName);
  const [productPrice, setProductPrice] = useState(data.productPrice);

因此,这些默认值将由文本字段拾取

3

0

iismaell 5 年前

在onChange道具中,尝试检查e.target。值不为空,否则指定旧的或默认的产品名称。

onChange={(e) => setProductName(e.target.value ? e.target.value : prod.productName)}