ReactJS event.target.value 返回未定义

Posted 2023-02-22

【中文标题】ReactJS event.target.value 返回未定义

【英文标题】：ReactJS event.target.value returns as undefined

【发布时间】：2021-03-26 08:29:31

【问题描述】：

我在 ReactJS 中制作了一个带有一个文本输入的表单，当它提交时，我想获取它的值并将其放入一个变量中。但是当我使用 console.log() 时，它会以undefined 的形式返回。我该如何解决？这是我的代码。

class App extends Component 
    state = 
        todoTitle: ""
    ;

    render() 
        return (
            <div>
                <center>
                    <form
                        onSubmit=(event) => 
                            event.preventDefault();
                            this.setState(todoTitle: event.target.value,);
                            console.log(this.state.todoTitle); // Returns "undefined"
                        
                    >
                        <input
                            type="text"
                            autocomplete="off"
                            class="form-control"
                            name="todoInput"
                            placeholder="Enter todo"
                            style= width: "400px", height: "50px" 
                        />
                        <input
                            type="submit"
                            value="Submit"
                            id="submitButton"
                        ></input>
                    </form>
                </center>
        
    

【问题讨论】：

setState 应该类似于 this.setState(todoTitle: event.target.value);

@ani：您需要任何其他有关 ReactJS、Hooks、异步 javascript 的帮助，请随时向 [e-mail] 发送消息或写电子邮件。快乐编码。如果有用，请给答案评分:) 谢谢

【参考方案1】：

您的代码还有一些其他错误，但我会回答您的问题。

setState 触发重新渲染，因此您的状态在下次运行之前无法记录。您可以只记录您在 setState 中输入的内容。

console.log(event.target.value);

这个问题有更多信息。 setState doesn't update the state immediately

另外，您可以进行回调。

this.setState( todoTitle: event.target.value , () =>
  console.log(this.state.todoTitle)
);

【参考方案2】：

您可以稍微修改您的应用程序以获取输入文本字段的 onChange 值，然后将其存储在数组中以防以下示例：

export default class App extends React.Component 
  state = 
    todoTitle: "",
    todoList: []
  ;

  render() 
    return (
      <div>
        <center>
          <form
            onSubmit=event => 
              event.preventDefault();
              this.setState(
                
                  todoList: [...this.state.todoList, this.state.todoTitle]
                ,
                () => 
                  console.log(this.state.todoList);
                
              );
            
          >
            <input
              type="text"
              autocomplete="off"
              class="form-control"
              name="todoInput"
              placeholder="Enter todo"
              onChange=event => 
                this.setState( todoTitle: event.target.value );
                console.log(event.target.value);
              
              style= width: "400px", height: "50px" 
            />
            <input type="submit" value="Submit" id="submitButton" />
          </form>
        </center>
      </div>
    );
  

完整应用在这里：Stackblitz

【参考方案3】：

试试这个：

class App extends React.Component 
  constructor(props) 
    super(props);
    this.state =  todoTitle: "" ;
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleChange = this.handleChange.bind(this);
  

  handleChange(event) 
    event.preventDefault();
    this.setState( todoTitle: event.target.value );
  

  handleSubmit(event) 
    event.preventDefault();
    console.log(this.state.todoTitle);
  

  render() 
    return (
      <div>
        <center>
          <form onSubmit=this.handleSubmit>
            <input
              type="text"
              autocomplete="off"
              class="form-control"
              name="todoInput"
              placeholder="Enter todo"
              style= width: "400px", height: "50px" 
              onChange=this.handleChange
            />
            <input type="submit" value="Submit" id="submitButton" />
          </form>
        </center>
      </div>
    );
  

这将更改输入更改的状态，然后登录提交状态。另一种方法是通过 getElementById 或 React 中的类似方法获取输入元素及其值。

您的代码格式也不是很好，并且遗漏了很多结束标签。

在这里阅读更多： Get form data in ReactJS

【参考方案4】：

您需要创建一个controlled input 或useRef 以供React 跟踪您的todoTitle 状态。

要创建controlled input，您需要使用onChange event 和value=this.state.todoTitle 属性。

同样在您的表单上，最好添加一个onSubmit 事件。但是，还有一个选项可以在表单提交按钮上设置提交。在这种情况下，我们需要使用onClick=this.handleSubmit，如下<input type="submit" value="Submit" id="submitButton" onClick=this.handleSubmit />。

以下代码将为您工作：

class Form extends React.Component 
  state = 
    todoTitle: "",
  ;

  handleSubmit = (e) => 
    e.preventDefault();
    console.log(this.state.todoTitle);
  ;
  render() 
    return (
      <div>
        <form onSubmit=this.handleSubmit>
          <input
            type="text"
            autocomplete="off"
            class="form-control"
            name="todoInput"
            placeholder="Enter todo"
            style= width: "400px", height: "50px" 
            value=this.state.todoTitle
             onChange=(e) => this.setState( todoTitle: e.target.value )
          />
          <input type="submit" value="Submit" id="submitButton" />
        </form>
      </div>
    );