动态添加输入react redux

// Redux reducer
const initialState = {
  inputs: []
};

const inputReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'ADD_INPUT':
      return {
        ...state,
        inputs: [...state.inputs, action.payload]
      };
    case 'REMOVE_INPUT':
      return {
        ...state,
        inputs: state.inputs.filter(input => input !== action.payload)
      };
    default:
      return state;
  }
};

// React component
import React, { useState } from 'react';
import { connect } from 'react-redux';

const DynamicInput = ({ inputs, addInput, removeInput }) => {
  const [newInput, setNewInput] = useState('');

  const handleAddInput = () => {
    addInput(newInput);
    setNewInput('');
  };

  const handleRemoveInput = input => {
    removeInput(input);
  };

  return (
    <div>
      {inputs.map(input => (
        <div key={input}>
          <input type="text" value={input} readOnly />
          <button onClick={() => handleRemoveInput(input)}>Remove</button>
        </div>
      ))}
      <input type="text" value={newInput} onChange={e => setNewInput(e.target.value)} />
      <button onClick={handleAddInput}>Add</button>
    </div>
  );
};

const mapStateToProps = state => ({
  inputs: state.inputs
});

const mapDispatchToProps = dispatch => ({
  addInput: input => dispatch({ type: 'ADD_INPUT', payload: input }),
  removeInput: input => dispatch({ type: 'REMOVE_INPUT', payload: input })
});

export default connect(mapStateToProps, mapDispatchToProps)(DynamicInput);