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

从父组件传递唯一属性，例如：name，并将该名称分配给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)} 
/>

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

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

工作原因：

状态是任何object，它包含键值对，因为我们使用相同的名称作为状态变量的名称，我们可以使用该名称来更新状态值。当我们在setState中传递对象时，它会将state变量的值替换为object中传递的值。就像：

state values = {x: 1, y: 2};

obj[x] = 5;

现在当我们执行setState时，它会合并这两个objects，新的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'>

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

1 个答案: