Question

我有form，其中有2个字段，点击后我想将字段数据保存到状态对象中。

我不希望在更改时为每个输入字段创建不同的功能。

代码：

import React, {Component} from 'react';

export default class Todo extends Component {
    constructor(props){
        super(props);
        this.state = {
        data : {
            "name":'',
            "option":'',    
        },
    },
        this.inputChange = this.inputChange.bind(this);
        this.handleForm = this.handleForm.bind(this);
    }

    inputChange = (propertyName,e) => {
        this.setState({});
    }

    handleForm = () => {
        console.log(this.state.data);
        console.log(this.state.data.name);
        console.log(this.state.data.option);
    }
    render(){
        return(
            <div>
                <form onSubmit={this.handleForm}>
                    <input type="text" placeholder="Enter text" name="name" value={this.state.data.name} onChange={this.inputChange.bind(this, "name")} />
                    <select name="option" value={this.state.data.option} onChange={this.inputChange.bind(this, "option")}>
                        <option> Select Option </option>
                        <option value="1"> Option 1 </option>
                        <option vlaue="2"> Option 2 </option>
                    </select>
                    <button type="submit"> Submit </button>
                </form>
            </div>
        );
    }
}

Answer 1

根据MDN DOC：

对象初始值设定项语法还支持计算属性名称。这允许你将一个表达式放在方括号[]中，这将是计算并用作属性名称。

使用此：

inputChange = (propertyName,e) => {
    let data = {...this.state.data};
    data[propertyName] = e.target.value;
    this.setState({ data });
}

工作代码：

class Todo extends React.Component {
  
  constructor(props){
    super(props);
    this.state = {
      data : {
        "name":'',
        "option":'',    
      },
    },
    this.inputChange = this.inputChange.bind(this);
    this.handleForm = this.handleForm.bind(this);
  }

  inputChange = (propertyName,e) => {
    let data = {...this.state.data};
    data[propertyName] = e.target.value;
    this.setState({ data });
  }

  handleForm = () => {
    console.log(this.state.data);
    console.log(this.state.data.name);
    console.log(this.state.data.option);
  }

  render() {
    console.log(this.state.data)
    return (
      <div>
        <form onSubmit={this.handleForm}>
          <input type="text" placeholder="Enter text" name="name" value={this.state.data.name} onChange={this.inputChange.bind(this, "name")} />
            <select name="option" value={this.state.data.option} onChange={this.inputChange.bind(this, "option")}>
                <option> Select Option </option>
                <option value="1"> Option 1 </option>
                <option vlaue="2"> Option 2 </option>
            </select>
            <button type="submit"> Submit </button>
        </form>
      </div>
    );
  }
}

ReactDOM.render(<Todo />, document.body)

<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>

Answer 2

按照反应教程：

class Example extends React.Component {
  constructor() {
    super();
    this.state = {email:''};
    this.handleEmailChange = this.handleEmailChange.bind(this);
  }
  
  handleEmailChange(event) {
		this.setState({email: event.target.value});
	}
  
  render() {
  return(
    <div>
       <input type="email" id="email" class="form-control" placeholder="Email" 
										value={this.state.email} onChange={this.handleEmailChange} />  
    </div>
    );
  }
  

}

如何通过单个函数处理多个输入字段更改

2 个答案: