Question

const [firstName, setFirstname] = useState('');

<Textbox
    inputId="firstName"
    labelName="Given Name"
    type="text"
    value={firstName}
    onChange={setFirstname(event.target.value)}
/>

要更新change event上的状态。它不会发射。任何想法为什么不呢？我也尝试过此方法。它不会触发handleChange。

`onChange={(e) => handleChange(e)}`
...

const handleChange = (e) => {
   console.log(e);
}

Answer 1

onChange属性类型是function，将onChange作为函数来解决问题

<Textbox
    inputId="firstName"
    labelName="Given Name"
    type="text"
    value={firstName}
    onChange={event => setFirstname(event.target.value)}
/>

Answer 2

请找到下面的代码片段，确保绑定要分配给onChange的方法，如下面的代码中的handleChange：

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}
ReactDOM.render(<NameForm />, document.querySelector("#app"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.0.0/react-dom.min.js"></script>


<div id="app"></div>

Answer 3

解决了它，我遇到的问题是传递onChange Textbox，其中也包含标签。因此必须将onChange属性作为函数传递

例如

文本框组件：

<label>{labelName}</label>
<input type="text" onChange={onChange} />

父母：

<Textbox onChange={e => setFirstname(e.target.value)}

Answer 4

名，中间名，姓氏无需使用多个useState

这是更新挂钩中对象的方法

1-更新挂钩中的对象

2重用多个输入处理

function App() {
  const [name, setName] = useState({
    firstName:'',
    surname:''
  });

 const handleName=e=>{
   setName({...name, [e.target.name]: e.target.value})
 }

  return (
    <div className="App">
      <h1>{name.firstName}</h1>
      <h1>{name.surname}</h1>
      <h2>Start editing to see some magic happen!</h2>
      <input
        type="text"
        inputId="firstName"
        name="firstName"
        value={name.firstName}
        onChange={handleName}
      />
      <input
        type="text"
        inputId="surname"
        name="surname"
        value={name.surname}
        onChange={handleName}
      />
    </div>
  );
}

onChange不触发，要更新状态

4 个答案: