Javascript 如何获取输入值并将其设置为单击时的状态，以及如何在控制台上记录以进行响应

我试图在单击时获取用户输入，并将其设置为状态，以尝试在控制台上显示它，但每次单击按钮时，状态属性都是空的

比如说。

但我只是得到：

这是我的密码

  class WalkInBook extends Component {
    constructor(props)
    {
      super(props);
      this.state={
        firstName:'',
        lastName:'',
        phone:'',
        email:'',
        course:'',

      };
    }

    handleClick = () =>
    {
      console.log(this.state);
    }

    handleChangeText(event){
      const target = event.target;
      const value = target.value;
      const name = target.name;

      this.setState({
        [name]:value
      })
    }




    render() {

      console.log(this.state); 
      //
    // MATERIAL-UI REQUIREMENT #2: Needed for accessing "styles" CB function declared above this class.
    const { classes } = this.props;
      return (
        <div align="center">
           <Typography>
           <div>
             <div className={classes.root} noValidate autoComplete="off">
            <TextField onChangeText={this.handleChangeText} id="standard-basic" name="firstName" label="First Name" />
             </div>
             <div className={classes.root} noValidate autoComplete="off">
               <h1>{this.state.data}</h1>
            <TextField id="standard-basic" name="lastName" label="Last Name" />
             </div>
            <div className={classes.root} noValidate autoComplete="off">
            <TextField  id="standard-basic" name="phone"  label="Phone" />
            </div>
            <div className={classes.root} noValidate autoComplete="off">
            <TextField  id="standard-basic" name="email" label="Email" />
            </div>
            <div className={classes.root} noValidate autoComplete="off">
            <TextField  id="standard-basic" name="course"  label="Course" />
            </div>
           </div>
           <div className={classes.root} noValidate autoComplete="off">
           <Button type="submit" onClick={this.handleClick} variant="outlined">Submit</Button>
           </div>
            </Typography>
        </div>
      );
    }
  } 

类WalkInBook扩展了组件{
建造师（道具）
{
超级（道具）；
这个州={
名字：''，
姓氏：“”，
电话：''，
电子邮件：“”，
课程：''，
};
}
handleClick=（）=>
{
console.log（this.state）；
}
handleChangeText（事件）{
const target=event.target；
常量值=target.value；
const name=target.name；
这是我的国家({
[名称]：值
})
}
render（）{
console.log（this.state）；
//
//MATERIAL-UI要求#2：访问此类上面声明的“styles”CB函数所需。
const{classes}=this.props；
返回(
{this.state.data}
提交
);
}
} 

我已更新了您的代码。请看下面：

class WalkInBook扩展了组件{
建造师（道具）
{
超级（道具）；
这个州={
名字：''，
姓氏：“”，
电话：''，
电子邮件：“”，
课程：''，
};
}
handleClick=（）=>{
console.log（this.state）；
}
handleChangeText=（事件）=>{
常量{target:{value，name}}=event
this.setState（{[name]：value}）；
}
render（）{
const{classes}=this.props；
返回(
this.handleChangeText（e）}id=“standard basic”name=“firstName”label=“firstName”/>
{this.state.data}
this.handleChangeText（e）}id=“标准基本”name=“lastName”label=“Last name”/
this.handleChangeText（e）}id=“标准基本”name=“phone”label=“phone”/
this.handleChangeText（e）}id=“标准基本”name=“email”label=“email”/
this.handleChangeText（e）}id=“标准基本”name=“课程”label=“课程”/>
提交
);
}
}

请参阅此完整的最小完整可验证示例（|）

代码笔演示：

使用所有必要的代码来演示所要求的内容：

class WalkInBook extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      firstName:'',
      lastName:'',
      phone:'',
      email:'',
      course:''
    };
    //These lines are important!
    this.handleClick = this.handleClick.bind(this);
    this.handleChangeText = this.handleChangeText.bind(this);
  }
  componentDidMount(){

  }

  handleClick() {
    console.log(this.state);
  }

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

  render() {
    return (
        <div>
          <input type="text" onChange={this.handleChangeText} name="firstName" placeholder="firstName"/>
          <input type="text" onChange={this.handleChangeText} name="lastName" placeholder="lastName"/>
          <input type="text" onChange={this.handleChangeText} name="phone" placeholder="phone"/>
          <input type="text" onChange={this.handleChangeText} name="email" placeholder="email"/>
          <input type="text" onChange={this.handleChangeText} name="course" placeholder="course"/>
          <button type="submit" onClick={this.handleClick} variant="outlined">Submit</button>
        </div>
        );
    }
} 

ReactDOM.render(
  <WalkInBook />,
  document.getElementById('root')
);

如果您希望使用功能组件来执行此操作，并且还需要迭代状态以生成输入标记，那么请查看以下内容（）：

功能步行本（道具）{
常量initState={
名字：''，
姓氏：“”，
电话：''，
电子邮件：“”，
课程：“”
};
const[state，setState]=React.useState（initState）；
函数handleClick（）{
console.log（状态）；
}
函数handleChangeText（事件）{
const target=event.target；
常量值=target.value；
const name=target.name；
console.log（'change'，name，value）；
设定状态({
状态
[名称]：值
})
}
常量句柄=handleChangeText；
常量输出=Object.keys（state）.map（function（key）{
//console.log（键）
回来
});
返回(
{
map（（子级，索引）=>{return child}）
}          
提交
);
} 
ReactDOM.render(
,
document.getElementById（'root'））
);

---

任何问题，请告诉我。

文本字段的代码是什么？？这些代码来自材料ui库

从“@Material ui/core/TextField”导入文本字段问题在于上下文<代码>此。尝试将处理程序更改为箭头函数
handleChangeText=（event）=>{….}
我以前也尝试过，但不幸的是，它不起作用..您需要在所有
TextField
组件中添加
onChange
属性<代码>

。您还需要将

handleChangeText

方法更改为箭头函数，或者将其绑定到构造函数中。

this.setState({
      ...this.state,
      [name] : value
    })

function WalkInBook(props) {
  const initState = {
      firstName:'',
      lastName:'',
      phone:'',
      email:'',
      course:''
    };
  const [state, setState] = React.useState(initState);

  function handleClick() {
    console.log(state);
  }

  function handleChangeText(event){
    const target = event.target;
    const value = target.value;
    const name = target.name;
    console.log('change', name, value);
    setState({
      ...state,
      [name] : value
    })
  }

  const handle = handleChangeText;
  const output = Object.keys(state).map(function (key) {
    //console.log(key)
    return <input type="text" onChange={handle} name={key} placeholder={key}/>;
  });

  return (
    <div>
      {
        output.map((child, index) => {return child})
      }          
      <button type="submit" onClick={handleClick} variant="outlined">Submit</button>
    </div>
  );
} 

ReactDOM.render(
  <WalkInBook />,
  document.getElementById('root')
);