this.setState 在 React 中不适用于此代码

Question

我正在尝试学习反应并卡在这段代码中，无法更改 select 下拉列表或文本输入字段中的值。有人能告诉我我做错了什么吗？

也尝试用 () => 绑定 evenhandlers。还是不行。

class FlavorForm extends React.Component {
    constructor(props) {
    super(props);
    this.state = {
              selvalue: 'coconut',
              textvalue: ''
             };
    this.handleInputChange = this.handleInputChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
}

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

    this.setState({
        name: value
    });
}

handleSubmit(event) {
    alert('Your favorite flavor is: ' + this.state.selvalue + ' text is: ' + this.state.textvalue);
    event.preventDefault();
}

render() {
    const arrList = ['grapefruit','lime','coconut','mango'];
    return (
        <form onSubmit={this.handleSubmit}>
            <label>
                Pick your favorite flavor:
                <select name="selection" value={this.state.selvalue} onChange={this.handleInputChange}>
                    <SelectList arrList = {arrList} />
                </select>
            </label>
            <br />
            <label>
                Name:
                <input name="sometext" type="text" value={this.state.textvalue} onChange={this.handleInputChange} />
            </label>
            <br />
           <input type="submit" value="Submit" />
       </form>
     );
   }
 }

  function SelectValue(props) {
      let value = props.tran;
     return <option value={value}>{value.charAt(0).toUpperCase() +          value.slice(1)}</option>;
   }

  function SelectList(props) {
      let arr = props.arrList;
      let arrVal = arr.map((arr, index) => 
       <SelectValue key={index} tran={arr} />
   );
   return arrVal;
  }

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

https://codepen.io/noobCoder89/pen/RwbKLyq

Answer 1

您正在将 name 设置为状态，但 name 是变量，因此请尝试以下代码，

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

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

Answer 2

您输入的元素 name 是 wrong.And 与状态键不同。因此更改相同的状态键名称
然后在 setState 函数中你只需调用 name 作为键而不是变量。所以你需要包装 [var]

查看以下变化

Check this worked Codepen

class FlavorForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
                  selvalue: 'coconut',
                  textvalue: ''
                 };
    this.handleInputChange = this.handleInputChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleInputChange(event){
    const target = event.target;
    const value = target.value;
    const name = target.name;
    this.setState({
      [name]: value //convert to variable call
    });
  }

  handleSubmit(event) {
    alert('Your favorite flavor is: ' + this.state.selvalue + ' text is: ' + this.state.textvalue);
    event.preventDefault();
  }

  render() {
    const arrList = ['grapefruit','lime','coconut','mango'];
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Pick your favorite flavor:
          <select name="selvalue"value={this.state.selvalue} onChange={this.handleInputChange}>
            <SelectList arrList = {arrList} />
          </select>
        </label>
        <br />
        <label>
          Name:
          <input name="textvalue" type="text" value={this.state.textvalue} onChange={this.handleInputChange} />
        </label>
          <br />
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

function SelectValue(props) {
  let value = props.tran;
  return <option value={value}>{value.charAt(0).toUpperCase() + value.slice(1)}</option>;
}

function SelectList(props) {
  let arr = props.arrList;
  let arrVal = arr.map((arr, index) => 
      <SelectValue key={index} tran={arr} />
    );
  return arrVal;
}

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

Answer 3

要访问下拉列表中的 onChange 事件值，您需要访问 event.target.value

如果使用箭头函数，则不需要构造函数中的绑定

handleInputChange=(event)=>{    
 console.log(event.target.value)
 this.setState({
   selvalue: event.target.value
 });
}

this.setState 在 React 中不适用于此代码

this.setState not working for this code in React

events

setstate

reactjs