reactjs - 无法更改 React JS 中的文本框值

Question

嗨，我正在开发 React JS 应用程序。我在页面加载时为文本框分配了默认值。应该允许用户更改此设置，但用户无法编辑文本框中的值。下面是我的代码。

    const EditStyleFormComponent = ({
submitting,
invalid,
}) => (
  <form className={className} onSubmit={handleSubmit}>
    <h2>LSPL (Low Stock Presentation Level)</h2>
    <Line />
    <InputGroup>
      <TextField value="Current" label="LSPL Manual" isEditable="true" />
    </InputGroup>
 </form>
);

下面是我的 TextField.js

const TextField = ({
  className,
  label,
  description,
  state,
  errorMessage,
  isEditable,
  spaceAtBottom, // Not used, but we don't want it in otherProps
  ...otherProps
}) => {
  const inputId = _.uniqueId();
  return (
    <div className={className}>
      {label &&
        <label htmlFor={inputId}>{label}</label>
      }
      <div className="input-group" id={isEditable ? 'editable' : 'readonly'}>
        <input
          id={inputId}
          readOnly={!isEditable}
          {...otherProps}
        />
        {getStatusIcon(state)}
        {errorMessage &&
          <Error>{errorMessage}</Error>
        }
        {description &&
          <Description>{description}</Description>
        }
      </div>
    </div>
  );
};

有人可以帮我解决这个问题吗？任何帮助，将不胜感激。谢谢

标签： reactjs

Answer 1

使用不受控制的输入，您可以使用defaultValue

const TextField = ({
  className,
  label,
  description,
  state,
  errorMessage,
  isEditable,
  spaceAtBottom, // Not used, but we don't want it in otherProps
  ...otherProps
}) => {
  const inputId = 1;
  return (
    <div>
      {label &&
        <label htmlFor={inputId}>{label}</label>
      }
      <div className="input-group" id={isEditable ? 'editable' : 'readonly'}>
        <input
          id={inputId}
          readOnly={!isEditable}
          {...otherProps}
        />
        {errorMessage &&
          <Error>{errorMessage}</Error>
        }
        {description &&
          <Description>{description}</Description>
        }
      </div>
    </div>
  );
};


const EditStyleFormComponent = ({
submitting,
invalid,
}) => (
  <form>
    <h2>LSPL (Low Stock Presentation Level)</h2>
      <TextField defaultValue="Current" label="LSPL Manual" isEditable="true" />
 </form>
);

class Hello extends React.Component {
  render() {
    return <div><EditStyleFormComponent/></div>;
  }
}

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

在这里查看小提琴https://jsfiddle.net/0f6n85ym/

或者，您也可以在受控输入中执行此操作。

const TextField = ({
  className,
  label,
  description,
  state,
  errorMessage,
  isEditable,
  spaceAtBottom, // Not used, but we don't want it in otherProps
  ...otherProps
}) => {
  const inputId = 1;
  return (
    <div>
      {label &&
        <label htmlFor={inputId}>{label}</label>
      }
      <div className="input-group" id={isEditable ? 'editable' : 'readonly'}>
        <input
          id={inputId}
          readOnly={!isEditable}
          {...otherProps}
        />
        {errorMessage &&
          <Error>{errorMessage}</Error>
        }
        {description &&
          <Description>{description}</Description>
        }
      </div>
    </div>
  );
};


const EditStyleFormComponent = ({
submitting,
invalid,
value,
onChange
}) => (
  <form>
    <h2>LSPL (Low Stock Presentation Level)</h2>
      <TextField value={value} onChange={onChange} label="LSPL Manual" isEditable="true" />
 </form>
);

class Hello extends React.Component {
constructor(props){
super(props);
   this.state = {
      name: 'Current'
   }
}

onChange = (e)=>{
this.setState({name: e.target.value});
}
  render() {
    return <div><EditStyleFormComponent value={this.state.name} onChange={this.onChange}/></div>;
  }
}

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

在这里查看小提琴 https://jsfiddle.net/bshumpy0/