如何在ReactJS中通过点击事件动态创建输入字段？

Hey there! I see you're looking to replace that browser prompt with a proper input field that appears when your onClick event fires. Let's break down how to do this, whether you're working with vanilla JS or React (since your original code uses a class method, I'll cover both scenarios):

Vanilla JavaScript Solution #

If you're working with plain JavaScript, you can dynamically create an input field and submit button when the click event triggers, then handle the patch request once the user confirms their input.

First, add a container in your HTML where the input will live:

<div id="inputContainer"></div>

Then update your onSubmitCell function:

onSubmitCell = event => {
  const personCurrent = event.target.value;
  const inputContainer = document.getElementById('inputContainer');

  // Clear any existing inputs first to avoid stacking
  inputContainer.innerHTML = '';

  // Create input field
  const inputField = document.createElement('input');
  inputField.type = 'text';
  inputField.placeholder = 'Enter new URL';
  inputField.classList.add('custom-input'); // Optional: add styling classes

  // Create submit button
  const submitBtn = document.createElement('button');
  submitBtn.textContent = 'Update URL';
  submitBtn.classList.add('custom-btn'); // Optional: add styling classes

  // Handle submit action
  submitBtn.addEventListener('click', () => {
    const newCell = inputField.value.trim();
    if (!newCell) {
      alert('Please enter a valid URL');
      return;
    }

    axios.patch(`http://localhost:3004/employee/${personCurrent}`, { cellphone: newCell })
      .then(response => {
        console.log('Update successful:', response.data);
        inputContainer.innerHTML = ''; // Clean up after success
      })
      .catch(error => {
        console.error('Update failed:', error);
      });
  });

  // Add elements to container
  inputContainer.appendChild(inputField);
  inputContainer.appendChild(submitBtn);

  // Auto-focus the input for better user experience
  inputField.focus();
}

Key Notes for Vanilla JS: #

• We clear the container first to prevent multiple input fields from piling up
• Added a trim and empty value check to avoid submitting invalid data
• Clean up the input field after a successful update to keep the UI tidy
• Auto-focusing the input lets users start typing immediately, improving flow

React Recommended Solution #

If this is part of a React component, using state to control the input's visibility is far more maintainable than direct DOM manipulation. Here's how to refactor your code:

import React, { Component } from 'react';
import axios from 'axios';

class EmployeeCell extends Component {
  state = {
    isInputVisible: false,
    selectedEmployeeId: null,
    newCellValue: ''
  };

  // Trigger input display on click
  onSubmitCell = event => {
    this.setState({
      isInputVisible: true,
      selectedEmployeeId: event.target.value,
      newCellValue: '' // Reset input value for new entries
    });
  };

  // Sync input value with component state
  handleInputChange = e => {
    this.setState({ newCellValue: e.target.value });
  };

  // Handle patch request and cleanup
  handleSave = () => {
    const { selectedEmployeeId, newCellValue } = this.state;
    const trimmedValue = newCellValue.trim();

    if (!trimmedValue) {
      alert('Please enter a valid URL');
      return;
    }

    axios.patch(`http://localhost:3004/employee/${selectedEmployeeId}`, { cellphone: trimmedValue })
      .then(response => {
        console.log('Update successful:', response.data);
        this.setState({ isInputVisible: false, newCellValue: '' });
      })
      .catch(error => {
        console.error('Update failed:', error);
      });
  };

  render() {
    const { isInputVisible, newCellValue } = this.state;

    return (
      <div className="employee-cell">
        {/* Your original click trigger (e.g., a button or editable cell) */}
        <button onClick={this.onSubmitCell} value={this.props.employeeId}>
          Update Cell URL
        </button>

        {/* Conditionally render input field */}
        {isInputVisible && (
          <div className="input-wrapper">
            <input
              type="text"
              value={newCellValue}
              onChange={this.handleInputChange}
              placeholder="Enter new URL"
              autoFocus
            />
            <button onClick={this.handleSave}>Save</button>
            <button onClick={() => this.setState({ isInputVisible: false })}>Cancel</button>
          </div>
        )}
      </div>
    );
  }
}

export default EmployeeCell;

Key Notes for React: #

• Uses React's state to control input visibility, aligning with React's declarative design
• Implements a controlled input, keeping the input value synced with component state
• Added a cancel button to let users dismiss the input without submitting
• No direct DOM manipulation—React handles rendering and cleanup automatically

Both approaches solve your core need: replacing the prompt with a proper, in-page input field that appears when your onClick event fires. Pick the one that fits your project's tech stack!

内容的提问来源于stack exchange，提问作者Jota