Question

我已经坚持了一段时间。我的输入字段不想更改默认文本，当我将值更改为 defaultValue 时，我的输入字段返回为空。这是我的代码：

interface IState {
  IPObject: IAddIP;
  ShowTimer: boolean;
  Client_IP: string;


}

interface IProps { }
export class Home extends Component<IProps, IState> {
  constructor(props: IProps) {
    super(props);
    this.state = {
      IPObject: {
        priority: "",
        IPList: "",
        rule: "",
        Name: "",
        Subnet: ""
      },
      ShowTimer: false,
      Client_IP: ""
    }

  }
 async componentDidMount() {
    const IPAddress = await publicIp.v4();
    this.setState({ Client_IP: IPAddress })
  }
  handleChange = () => (e: any) => {
    e.persist();
    this.setState(prevState => ({
      ...prevState,
      Client_IP: e.target.value
    }));
  };
 render() {
    return (
      <>


          <label>Your IP Address</label>
          <Input placeholder="IP address" type='text' required={true} onChange={() => this.handleChange()} value={this.state.Client_IP} className="nes-input"></Input>

一切似乎都是正确的，但我不知道为什么我无法在从 ComponentDidMount 填充后更改输入字段

Answer 1

您没有向 onChange 组件的 Input 参数返回函数。

波纹管是固定代码：

<Input 
  placeholder="IP address" 
  type='text' required={true} 
  onChange={this.handleChange()} 
  value={this.state.Client_IP} 
  className="nes-input"></Input>

您的 handleChange 是一个咖喱函数，它返回处理函数，该函数从 Input 组件获取事件。所以你需要直接执行它，而不是在 onChange 发生时。

奖励解决方案

在您的情况下，您根本不需要咖喱功能。只需像这样传递函数：

<Input 
  placeholder="IP address" 
  type='text' required={true} 
  onChange={this.handleChange} 
  value={this.state.Client_IP} 
  className="nes-input"></Input>

但是您的 handleChange 应该这样定义：

handleChange = (e: any) => {
  e.persist();
  this.setState(prevState => ({
    ...prevState,
    Client_IP: e.target.value
  }));
};

Answer 2

我认为您的输入行需要更改为以下内容：

<Input placeholder="IP address" type='text' required={true} onChange={(e: any) => this.handleChange(e)} value={this.state.Client_IP} className="nes-input" />

传入输入事件参数

反应输入字段不允许用户输入

2 个答案: