Question

在我的React应用程序中，我想在输入字段中编辑数据，而不必重新输入已经存在的所有内容。我可以将每个字段的数据填充到占位符文本中，但是该文本不可编辑，并且在您开始键入时会消失。有没有办法使它成为默认的可编辑值？

对不起，如果以前已经回答过-对我来说这似乎很基础，但是我搜索过很多次，却找不到我想要的答案。

import React from 'react'
import { EditIcon, MenuIcon } from '../icons'

import {
    TableCell,
    TableRow,
    Button,
    Input,
  } from '@windmill/react-ui'

export class Transaction extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      editView: false
    }
    this.onEditButtonClicked = this.onEditButtonClicked.bind(this)
  }

  onEditButtonClicked(){
    this.setState({
      editView: !this.state.editView
    })
  }

  render() {
    const editClicked = this.state.editView

    if (editClicked) {
      return (
        <TableRow key={this.props.transaction.id}>
          <TableCell>
            <Input 
              className="text-sm"
              placeholder={this.props.transaction.payee}
            />
          </TableCell>
          <TableCell>
            <div className="flex items-center space-x-4">
              <Button aria-label="Delete" block size="small">
                Save
              </Button>
              <Button layout="outline" aria-label="Cancel" onClick={this.onEditButtonClicked} block size="small">
                Cancel
              </Button>
            </div>
          </TableCell>
        </TableRow>
      )
    }

    return (
      <TableRow key={this.props.transaction.id}>
          <TableCell>
            <p className="text-sm">{this.props.transaction.payee}</p>
          </TableCell>
          <TableCell>
            <div className="flex items-center space-x-4">
              <Button layout="link" size="icon" aria-label="Edit" onClick={this.onEditButtonClicked}>
                <EditIcon className="w-5 h-5" aria-hidden="true" />
              </Button>
            </div>
          </TableCell>
        </TableRow>
      )
  }
}

Answer 1

这就是您所说的值，而不是占位符。因此，只需使用一个值并为此设置默认值即可。

更多信息here

如何使输入占位符文本可编辑？

1 个答案: