javascript - React 单独的实例使用单独的值调用相同的方法

Question

我需要渲染两个单独的input[type="range]每一个都有一个单独的 output值。

我创建了一组组件，它们传递和显示它们的数据，以便以正确的方式呈现。
但我无法拆分我需要声明的两个组件的渲染 state受到影响，我想将其存储在变量中并在不同情况下传递它。
这是我正在做的事情的代码笔:
http://codepen.io/wanbinkimoon/pen/NpEpre?editors=0011

以下是我认为错误的几行:

handleChange() {
   let v = props.t;
   this.setState({
     v: event.target.value
 });

这是一个引用 <Range /> 实例的函数声明如下:

<Range 
    name = 'X Value'
    t = {'xvalue'}
    value = {this.state.xvalue}
    change = {this.handleChange}
/>

我尝试传递一些参数，但返回错误。

Answer 1

从父组件传递一个唯一的属性，例如:名称，并将该名称分配给input字段，尝试使用与state变量名称相同的名称。

像这样:

<input
    type="range"
    min={min}
    max={max}
    step={step}
    name={this.props.name} //assigning name
    value={this.props.value} 
    onChange={(e)=>this.props.change(e)} 
/>

将事件对象传递给父组件。使用此事件来更新状态值。像这样:

handleChange(e) {
    //let v = props.t;
    let obj = {};
    obj[e.target.name] = e.target.value;
    this.setState(obj);
    console.log(event.target.value);
};

它起作用的原因:

State是任何对象，它包含键值对，由于我们使用与状态变量名称相同的名称，我们可以使用该名称来更新状态值。当我们在 setState 中传递一个对象时，它会用该 object 中传递的值替换 state 变量的值。就像:

状态值 = {x: 1, y: 2};

obj[x] = 5;

现在，当我们执行setState时，它将合并这两个对象，新的state值将是:{x: 5, y: 2}

检查工作代码:

class Range extends React.Component {
  constructor(props) {
    super(props);
  };
  render() {
    let min = 0;
    let max = 500;
    let step = 1;
    return (
      <form>
        <h4>{this.props.name}</h4>
        <input
           type="range"
           min={min}
           max={max}
           step={step}
           name={this.props.name}
           value={this.props.value} 
           onChange={(e)=>this.props.change(e)} 
         />	
         <output>
           {this.props.value}
         </output>
       </form>
    )
  };
};

class Form extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      xvalue: 100,
      yvalue: 300,
    }
    this.handleChange = this.handleChange.bind(this);
  };
	
  handleChange(e) {
    let obj = {};
    obj[e.target.name] = e.target.value;
    this.setState(obj);
    console.log(event.target.value);
  };
	
  render() {	
     return (
        <div className="formwrap">
          <Range 
              name = 'xvalue'
              t = {'xvalue'}
              value = {this.state.xvalue}
              change = {this.handleChange}
          />
          <Range 
             name = 'yvalue'
             t = {'yvalue'}
             value = {this.state.yvalue}
             change = {this.handleChange}
          />
        </div>
     )
   };
};

class Rect extends React.Component {
  constructor(props) {
    super(props);
  };
  
  render() {
     return (
        <div> 
           Rect
        </div>
     )
  };
};

class Wrap extends React.Component {
  constructor(props) {
     super(props);
  }	
  render() {
    return (
      <div>
         <Form />
            <hr />
         <Rect />
      </div>
    )
  };
};

ReactDOM.render(
  <Wrap />,
  document.getElementById('app')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'>