Question

我正在学习React.js，我想使用onInput事件来更改名称，但是它不起作用。

为什么会这样？我写错了函数（OnInputChange）吗？

这是我的app.js

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

class App extends Component {
  state = {
    Username: [{ name: "Jacky" }]
  };

  OnInputChange = event => {
    this.setState({
      Username: [{ name: "event.target.value" }]
    });
  };
  render() {
    return (
      <div>
        <UserInput OnInput={this.OnInputChange} />
        <UserOutput name={this.state.Username[0].name} />
      </div>
    );
  }
}

export default App;

我的UserInput.js：

import React from "react";

const UserInput = () => {
  return (
    <div>
      <input type="text" />
    </div>
  );
};

export default UserInput;

我的UserOutput.js：

import React from "react";

const UserOutput = props => {
  return (
    <div>
      <p>I am {props.name}</p>
      <p>I am {props.name}</p>
    </div>
  );
};

export default UserOutput;

Answer 1

Your OnInput property is not passed down to your input component. It would have to be:

const UserInput = props => {
    return(
      <div>
        <input type="text" onChange={props.OnInput} />
      </div>
    );
};

Your handler uses a literal string 'event.target.value', it must read the value:

Username: [{ name: event.target.value }],

Also, there is no need to wrap username in an array and another object, you can just use:

Username: event.target.value,

and access this.state.Username.

and initialize as

state = {
  Username: "Jacky"
};

Answer 2

1.) You need to pass the event handler to your UserInput component.

const UserInput = ({ onChange }) => {...}

and then

<UserInput onChange={this.OnInputChange} />

2.) You need to use the passed event handler in your input onChange.

<input onChange={onChange} />

3.) You need to use event.target.value not 'event.target.value'.

Answer 3

更改：

1-您没有将onChange处理程序分配给UserInput组件中的输入元素，仅将该处理程序传递到props中，将自动失效。

2-您正在错误地更新状态值，它应该是name: event.target.value（不是字符串）。

代码：

const UserInput = (props) => {
  return(
    <div>
      <input type="text" onChange={props.OnInput}></input>
    </div>
  );
}



OnInputChange = (event) => {
  this.setState({ 
    Username:[
      { name: event.target.value },
    ],
  });
}

工作代码：

class App extends React.Component {
  state = {
    Username: [{ name: "Jacky" }]
  };

  OnInputChange = event => {
    this.setState({
      Username: [{ name: event.target.value }]
    });
  };
  
  render() {
    return (
      <div>
        <UserInput OnInput={this.OnInputChange} />
        <UserOutput name={this.state.Username[0].name} />
      </div>
    );
  }
}

const UserInput = (props) => {
  return (
    <div>
      <input type="text" onChange={props.OnInput} />
    </div>
  );
};

const UserOutput = props => {
  return (
    <div>
      <p>I am {props.name}</p>
      <p>I am {props.name}</p>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id='app' />

为什么我的onInput无法更改props.name？

3 个答案: