在react当中怎么实现点击哪一个元素就对应的显示该元素所对应的样式或...

发布网友 发布时间：2022-04-23 03:49

我来回答

共2个回答

懂视网 时间：2022-04-22 14:51

今天来讲讲react的表单元素。

受控元素

下面来看一下如何获取输入框的值

import React, { Component } from 'react';

class Trem extends React.Component {
 constructor(props){
 super(props);
 this.inp = this.inp.bind(this);
 this.sub = this.sub.bind(this);
 this.state = {
  place:"请输入...",
  inputV:''
 }
 };
 inp(e){
 this.setState({
  inputV:e.target.value {/* 通过事件细节改变inputV的值*/}
 });
 console.log(e.target.value)
 }; 
 sub(){
 console.log(this.state.inputV)
 }; 
 render(){
 return (
  <div>
  <input type="text" onChange={this.inp} placeholder={this.state.place} value={this.state.inputV}/>
  <br/>
  <button onClick={this.sub}>{this.props.main}</button>{/*此处的main是来自父组件的传值*/}
  </div>
 )
 }
}
export default Trem;

代码解读：
this.inp = this.inp.bind(this); 绑定inp函数this指向
this.state 初始化变量
inp() 监听input的输入值
this.state.inputV 通过赋值获取input的value

textarea 标签

import React, { Component } from 'react';

class Trem extends React.Component {
 constructor(props){
 super(props);
 this.inp = this.inp.bind(this);
 this.sub = this.sub.bind(this);
 this.state = {
  place:"请输入...",
  inputV:''
 }
 };
 inp(e){
 this.setState({
  inputV:e.target.value 
 });
 console.log(e.target.value)
 }; 
 sub(){
 console.log(this.state.inputV)
 }; 
 render(){
 return (
  <div>
  <textarea type="text" onChange={this.inp} placeholder={this.state.place} value={this.state.inputV}/>  
  <br/>
  <button onClick={this.sub}>{this.props.main}</button>
  </div>
 )
 }
}

export default Trem;

下拉选择框

import React, { Component } from 'react';

class Trem extends React.Component {
 constructor(props){
 super(props);
 this.select = this.select.bind(this);
 this.state = {
  selectV:'coconut'
 }
 }; 
 select(e){
 this.setState({
  selectV:e.target.value 
 });
 console.log(e.target.value)
 }; 
 render(){
 return (
  <div>  
  <select value={this.state.selectV} onChange={this.select}>
   <option value="grapefruit">Grapefruit</option>
   <option value="lime">Lime</option>
   <option value="coconut">Coconut</option>
   <option value="mango">Mango</option>
  </select>
  <br/>
  </div>
 )
 }
}

export default Trem;

代码解读:
请注意，Coconut选项最初由于selected属性是被选中的。在React中，并不使用之前的selected属性，而在根select标签上用value属性来表示选中项。这在受控组件中更为方便，因为你只需要在一个地方来更新组件。

总之，<input type="text">, <textarea>, 和 <select> 都十分类似 - 他们都通过传入一个value属性来实现对组件的控制。

多个输入的解决方法
当你有处理多个受控的input元素时，你可以通过给每个元素添加一个name属性，来让处理函数根据 event.target.name的值来选择做什么。

import React,{Component} from 'react';

class More extends React.Component {
 constructor(props){
 super(props);
 this.state = {
  isGoing: true,
  numberOfGuests: 2
 };
 this.handleInputChange = this.handleInputChange.bind(this);
 };
 handleInputChange(event) {
 const target = event.target;
 const value = target.type === 'checkbox' ? target.checked : target.value;
 const name = target.name;
 this.setState({
  [name]: value
 });
 console.log(event.target.checked,event.target.value)
 };
 render(){
 return (
  <form>
  <label>
  Is going:
  <input name="isGoing" type="checkbox" checked={this.state.isGoing} onChange={this.handleInputChange} />
  </label>
  <br />
  <label>
  Number of guests:
  <input name="numberOfGuests" type="number" value={this.state.numberOfGuests} onChange={this.handleInputChange} />
  </label>
  </form>
 )
 }
}
export default More;

代码解读：

this.setState({
});

es6计算属性名语法

源码地址：https://github.com/Nick091608...

【相关推荐：react视频教程】

热心网友 时间：2022-04-22 11:59

思路：
使用 顶层API React.Children.map
React.Children.map(object children, function fn [, object context])
function 里面判断是否p元素，若是加上className=“hz-indent”！