React.js中如何用<button>存储传递用户输入值？组件传值失败求助

我来帮你排查下问题哈！你遇到的核心问题是子组件和父组件之间的状态传递逻辑没打通，再加上代码里有未完成的部分，导致点击Submit按钮后没任何反应。咱们一步步来修正：

问题分析 #

1. 你写的manipulator函数只完成了一半（event.targ...），正确获取输入值的写法应该是event.target.value，但更关键的是：你没有把这个回调函数传递给UserInput子组件，子组件没法通知父组件更新状态。
2. UserInput组件内部可能没有正确绑定表单提交事件，导致点击按钮无法触发状态更新逻辑。

完整修正代码 #

主组件 App.js #

import React, { Component } from 'react';
import UserInput from './UserInput/UserInput';
import UserOutput from './UserOutput/UserOutput';

class App extends Component {
  state = { 
    userName: 'Masood' 
  }

  // 完整实现状态更新的回调函数
  userNameChangeHandler = (inputValue) => {
    this.setState({ userName: inputValue });
  }

  render() {
    return (
      <div>
        {/* 通过props把回调函数传递给子组件 */}
        <UserInput 
          currentName={this.state.userName}
          onNameChange={this.userNameChangeHandler} 
        />
        {/* 把更新后的状态传给展示组件 */}
        <UserOutput userName={this.state.userName} />
      </div>
    );
  }
}

export default App;

子组件 UserInput.js（两种实现方式） #

方式1：受控组件（推荐，符合React状态管理理念）

import React, { Component } from 'react';

class UserInput extends Component {
  // 子组件内部维护输入框的状态
  state = {
    inputValue: this.props.currentName
  }

  // 实时监听输入框变化，更新子组件状态
  inputChangeHandler = (event) => {
    this.setState({ inputValue: event.target.value });
  }

  // 处理表单提交，把值传给父组件
  submitHandler = (event) => {
    event.preventDefault(); // 阻止表单默认刷新行为
    this.props.onNameChange(this.state.inputValue);
  }

  render() {
    return (
      <form onSubmit={this.submitHandler}>
        <input 
          type="text"
          value={this.state.inputValue}
          onChange={this.inputChangeHandler}
        />
        <button type="submit">Submit</button>
      </form>
    );
  }
}

export default UserInput;

方式2：使用Ref获取输入值

import React, { Component } from 'react';

class UserInput extends Component {
  // 处理表单提交，通过ref获取输入值
  submitHandler = (event) => {
    event.preventDefault();
    this.props.onNameChange(this.inputRef.value);
  }

  render() {
    return (
      <form onSubmit={this.submitHandler}>
        <input 
          type="text"
          ref={(input) => this.inputRef = input}
          defaultValue={this.props.currentName}
        />
        <button type="submit">Submit</button>
      </form>
    );
  }
}

export default UserInput;

关键注意点 #

• 父组件必须通过props传递回调函数给子组件，子组件才能把数据“送”回父组件。
• 表单提交时一定要调用event.preventDefault()，否则页面会刷新，React状态会丢失。
• 受控组件方式可以实时同步输入框状态，适合需要实时校验或联动的场景；Ref方式更简洁，适合简单的提交场景。

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