Question

我的App.js具有以下代码：

import React, {Component} from 'react';
import logo from './logo.svg';
import './App.css';
import CardMedia from '@material-ui/core/CardMedia';
import { withStyles } from '@material-ui/core/styles';
import CardActionArea from '@material-ui/core/CardActionArea';
import { Card, CardContent } from "@material-ui/core";
import Header from './Header';
import Grid from '@material-ui/core/Grid';
import TextField from '@material-ui/core/TextField';

class App extends Component{
  constructor(){
    super()
    this.state = {
      topText: '',
      bottomText: '',
      randomImg: "http://i.imgflip.com/1bij.jpg",
      allImages: [],
    }
    this.handleChange = this.handleChange.bind(this)
  }  

  handleChange(event) {
    const {name, value} = event.target
    console.log("working")
    this.setState({ [name]: value })
  }


  render() {
    return(
      <div>
        <Grid container justify="left" spacing={8}>
          <Grid item xs={12} sm={6}>
            <TextField
              id="standard-name"
              label="Top Text"
              value={this.state.topText}
              onChange={this.handleChange}
              margin="normal"
              variant="filled"
            />
          </Grid>

          <Grid item xs={12} sm={6}>
            <TextField
              id="standard-name"
              label="Bottom Text"
              value={this.state.bottomText}
              onChange={this.handleChange}
              margin="normal"
              variant="filled"
            />
          </Grid>
          <Header />
        </Grid>
      </div>      
    )
  }
}

export default App

console.log("Working")中的

handleChange语句不响应我在TextField中的输入。即我看不到：

（1）在“顶部文字”框中键入任何值

（2）我看不到控制台上显示“正在工作”

Answer 1

我已将您的代码复制到“代码”框，并从未使用的导入中清除了该代码。

https://codesandbox.io/s/table-9r5i9

值没有改变，因为您忘记向name添加TextField属性。
console.log("working");要求输入TextField。

您还有另外一期。 Grid组件在控制台中显示警告：

失败的道具类型：提供给justify的值为left的道具Grid无效，应该是[“ flex-start”，“ center”，“ flex-end”，“之一

Answer 2

我不确定为什么您没有在控制台中看到“正在工作”。我确实在控制台中看到“工作”，并且代码几乎完全相同。主要问题不是在TextField上设置“ name”属性：

            <TextField
              id="standard-name"
              label="Top Text"
              name="topText"
              value={this.state.topText}
              onChange={this.handleChange}
              margin="normal"
              variant="filled"
            />

没有name属性，您的handleChange（const {name, value} = event.target）将不会提供event.target中的名称。

这是一个基于您的代码的示例，其中第一个字段固定，而第二个字段仍显示该问题：

https://codesandbox.io/s/textfield-missing-name-191bq

Answer 3

为我工作：

您必须在textField上添加名称

<TextField
                  id="standard-name"
                  label="Bottom Text"
                  name="bottomText"

和

 <TextField
              id="standard-name"
              name="topText"

您在该州使用的相同名称。

this.state = {
      topText: "",
      bottomText: "",

这里所有代码：

import React, { Component } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

import CardMedia from "@material-ui/core/CardMedia";
import { withStyles } from "@material-ui/core/styles";
import CardActionArea from "@material-ui/core/CardActionArea";
import { Card, CardContent } from "@material-ui/core";
import Grid from "@material-ui/core/Grid";
import TextField from "@material-ui/core/TextField";

export default class App extends Component {
  constructor() {
    super();
    this.state = {
      topText: "",
      bottomText: "",
      randomImg: "http://i.imgflip.com/1bij.jpg",
      allImages: []
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    const { name, value } = event.target;
    console.log(name);
    this.setState({ [name]: value });
  }

  render() {
    return (
      <div>
        <Grid container justify="left" spacing={8}>
          <Grid item xs={12} sm={6}>
            <TextField
              id="standard-name"
              name="topText"
              label="Top Text"
              value={this.state.topText}
              onChange={this.handleChange}
              margin="normal"
              variant="filled"
            />
          </Grid>

          <Grid item xs={12} sm={6}>
            <TextField
              id="standard-name"
              label="Bottom Text"
              name="bottomText"
              value={this.state.bottomText}
              onChange={this.handleChange}
              margin="normal"
              variant="filled"
            />
          </Grid>
        </Grid>
      </div>
    );
  }
}

const rootElement = document.getElementById（“ root”）; ReactDOM.render（，rootElement）;

https://codesandbox.io/s/friendly-cdn-rmoim

控制台日志未响应ReactJS中的句柄更改

3 个答案: